转自：将文本定位于div的底部的方法 

摘要:
下文讲述将文本放于div的底部的两种方法，如下所示:
 
实现思路:
思路1:采用绝对定位的方式，将其放置于div的底部
思路2:使用Line-height属性将文本放置于div的底部
行高大小设置的计算公式:(height-(font-size/2))x2=***px
(100-(12/2)*2 = 188px; 
在web开发中,我们经常需要将div中的文本进行相关的定位，那么下文将通过举例的方法讲述
底部对齐的方法分享

<html>

<head>

<meta charset="utf-8">

<title>猫猫教程(www.maomao365.com)</title>

<style>

.div1{

  height:180px;

  width:180px;

  border:1px solid blue;

  position:relative

}

.div1 p{

  position:absolute;

  bottom:0px;

  padding:0px;

  margin:0px

}

.div2{

  height:100px;

  width:180px;

  border:1px solid blue;

  font-size:12px;

  line-height:188px;

}

</style>

</head>

<body>

<div class="div1">

  <p>这里是maomao教程</p>

</div>

<br />

<div class="div2"> 猫猫教程欢迎你 </div>

</body>

</html>

如何将文本放置在div的底部显示呢？的更多相关文章

  1. CSS div水平垂直居中和div置于底部

    一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...

  2. 如何让图片在垂直方向与 div的底部对齐 水平居中

    需要图片的绝对定位postion: absolute. 一般定位时, 是用div去定位. 一般不直接用 非div去"绝对/相对"定位. 如不直接用 等去定位. 因为这些好像不好定位 ...

  3. vue setTimeout用法 jquery滚动到某一个div的底部

    //vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...

  4. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  5. 在div 底部显示背景图片

    下面代码实现div层背景图片在底部显示: div { background : url (/images/bg.jpg) no-repeat fixed ; background-position-y ...

  6. vue 移动端项目，动态控制div距离底部的距离

    <template> <div class="details"> <com-nav-bar title="保险详情"> &l ...

  7. 设置DIV隐藏与显示，表格滑动条

    问题描述:         现在希望使用JS设置DIV块的显示与隐藏,当某一个事件触发是,自动显示DIV块,显示表格数据,但是要求表格显示滑动条 问题解决:   (1)DIV块的隐藏与显示 如上所示, ...

  8. 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  9. 页面内容不满屏幕高度时，footer底部显示

    底部高度固定的情况下 <style> body,html{ height: 100%; margin: 0; } .content{ min-height: 100%; padding-b ...

随机推荐

  1. 在Mysql中，事务是如何实现的呢？

    hello大家好,我是一个爱看底层的小码,对于每一个学习mysql数据库的同学来说,事务都是一个绕不开的话题,简单的说来事务是指访问并可能更新数据库中各项数据项的一个程序执行单元.事务的四个特征无非就 ...

  2. [实用分享]Kindle电子书格式AZW3转换为MOBI

    [实用分享]Kindle电子书格式AZW3转换为MOBI 思路:先拆解成源文件再转换成 MOBI 推荐首选这种方法.此方法的思路是,首先用 KindleUnpack 把 azw3 文件拆解成源文件,然 ...

  3. BZOJ 1009 [HNOI2008]GT考试(矩阵快速幂优化DP+KMP)

    题意: 求长度为n的不含长为m的指定子串的字符串的个数 1s, n<=1e9, m<=50 思路: 长见识了.. 设那个指定子串为s f[i][j]表示长度为i的字符串(其中后j个字符与s ...

  4. Go语言实现：【剑指offer】用两个栈实现队列

    该题目来源于牛客网<剑指offer>专题. 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. Go语言实现: var list1 = list.New( ...

  5. Oracle 12C In-Memory特性研究

    Oracle 12C In-Memory特性研究一.Oracle In-Memory1.1 In-Memory 开启方法1.2 开启与关闭IM column store1.3 inmemory优先级调 ...

  6. Yandex Big Data Essentials Week1 Unix Command Line Interface Processes managing

    free displays the total amount of free and used memory free [options] top provides a dynamic real-ti ...

  7. java jni 调用c语言函数

    今日在hibernate源代码中遇到了native关键词,甚是陌生,就查了点资料,对native是什么东西有了那么一点了解,并做一小记. native关键字说明其修饰的方法是一个原生态方法,方法对应的 ...

  8. 数据库主从监控脚本,数据传到influxdb

    #!/bin/bash port=`/usr/sbin/ss -ntlp | | awk '{print $4}' | awk -F":" '{print $2}'` array= ...

  9. Vlan 间路由的方法

    vlan间路由的方法主要有三种 1.通过路由器上多个接口实现 2.通过路由器上一个接口即单臂路由实现 3.通过三层交换实现   下面将每一中实现方法配合实验说明     第一:通过路由器上多个接口实现 ...

  10. [转]adbkey与adbkey.pub

    转载至:https://blog.csdn.net/caibaihui/article/details/46862591 error: device unauthorized. Please chec ...