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

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

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>猫猫教程(www.maomao365.com)</title>
  5. <style>
  6.  
  7. .div1{
  8.   height:180px;
  9.   width:180px;
  10.   border:1px solid blue;
  11.   position:relative
  12. }
  13. .div1 p{
  14.   position:absolute;
  15.   bottom:0px;
  16.   padding:0px;
  17.   margin:0px
  18. }
  19.  
  20. .div2{
  21.   height:100px;
  22.   width:180px;
  23.   border:1px solid blue;
  24.   font-size:12px;
  25.   line-height:188px;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30.  
  31. <div class="div1">
  32.   <p>这里是maomao教程</p>
  33. </div>
  34.  
  35. <br />
  36. <div class="div2"> 猫猫教程欢迎你 </div>
  37.  
  38. </body>
  39. </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. MCMC&Gibbs sampling

    Note of Markov Chain Monte Carlo and Gibbs Sampling :  http://pan.baidu.com/s/1jHpWY1o 序:A major lim ...

  2. SpringMVC 上传文件 MultipartFile 转为 File

    在使用 SpringMVC 上传文件时,接收到的文件格式为 MultipartFile,但是在很多场景下使用都需要File格式的文件,记录下以便日后使用. 以下mFile为MultipartFile文 ...

  3. 【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建

    Web可视化开发是阿里云IoT Studio中比较重要的一个功能,通过可视化拖拽的方式,方便地将各种图表组件与设备相关的数据源关联,无需编程,即可将物联网平台上接入的设备数据可视化展现. 目前支持的组 ...

  4. 四 Shell条件测试

    条件测试操作 在bash的各种流程控制结构中通常要进行各种测试,然后根据测试结果执行不同的操作,有时也会通过与if等条件语句相结合,让我们可以方便的完成判断. 语法格式 test 选项 文件名或目录名 ...

  5. win10 + cuda10 +cudnn + GLUON 环境搭建

    1. <动手学深度学习> 由于新型非典型肺炎扩散,上班日期挪到2.10 日了,在家比较无聊决定了解一下深度学习. 在github 上找到一个资源,可以动手学深度学习,便打算按照这本书的内容 ...

  6. pycham设置头文件内容

    pycharm软件 设置头文件方法 File->settings->Editor->File and Code Templates->Python Script  #!/usr ...

  7. springboot结合Docker部署

    工程目录 创建Dockerfile FROM java VOLUME /tmp ADD springboot-docker-0.0.1-SNAPSHOT.jar app.jar RUN bash -c ...

  8. bootstrap 图片类 和 按钮类 部分

    bootstrap框架,来自 Twitter,基于 html ,css ,js.简介灵活. 首先引入  bootstrap.js   bootstrap.css  及 jquery.js  这里不考虑 ...

  9. Mysql的基本查询语句

    聚集函数 mysql有5个聚集函数,分别是AVG,MAX,MIN,SUM,COUNT. 分组 分组的使用group by作为关键字,having作为条件关键字. having和where的区别:1.w ...

  10. 利用ionic3进行上一行和左一行不动，中间移动的功能

    首先在html中的写法是 <ion-header> <ion-navbar> <ion-title>历史数据</ion-title> </ion- ...