如何将文本放置在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的底部显示呢?的更多相关文章
- CSS div水平垂直居中和div置于底部
一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...
- 如何让图片在垂直方向与 div的底部对齐 水平居中
需要图片的绝对定位postion: absolute. 一般定位时, 是用div去定位. 一般不直接用 非div去"绝对/相对"定位. 如不直接用 等去定位. 因为这些好像不好定位 ...
- vue setTimeout用法 jquery滚动到某一个div的底部
//vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...
- 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- 在div 底部显示背景图片
下面代码实现div层背景图片在底部显示: div { background : url (/images/bg.jpg) no-repeat fixed ; background-position-y ...
- vue 移动端项目,动态控制div距离底部的距离
<template> <div class="details"> <com-nav-bar title="保险详情"> &l ...
- 设置DIV隐藏与显示,表格滑动条
问题描述: 现在希望使用JS设置DIV块的显示与隐藏,当某一个事件触发是,自动显示DIV块,显示表格数据,但是要求表格显示滑动条 问题解决: (1)DIV块的隐藏与显示 如上所示, ...
- 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1.滚动条的变相隐藏 思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把d ...
- 页面内容不满屏幕高度时,footer底部显示
底部高度固定的情况下 <style> body,html{ height: 100%; margin: 0; } .content{ min-height: 100%; padding-b ...
随机推荐
- Redis 通用方法 存储DataTable DataRow DataSet
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 4、Oracle 数据库 startup 报错:ORA-27102: out of memory
1.数据库启动报错: ORA-: out of memory SQL> startup pfile='/db/oracle/init.ora'; ORA-: out of memory Linu ...
- 深入并发锁,解析Synchronized锁升级
这篇文章分为六个部分,不同特性的锁分类,并发锁的不同设计,Synchronized中的锁升级,ReentrantLock和ReadWriteLock的应用,帮助你梳理 Java 并发锁及相关的操作. ...
- python 爬虫过程中出现:ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接
参考: https://blog.csdn.net/illegalname/article/details/77164521
- Java入门基础(类)
类 在Java中表示自定义的数据类型,一个class可以是若干基本类型的组合. public class Student { public String id;//学号 public String n ...
- 题解【[HNOI2010]弹飞绵羊】
\[ \texttt{Description} \] 有 \(n\) 个弹力装置排成一排,第 \(i\) 个弹力装置的弹力系数是 \(k_i\) ,绵羊到第 \(i\) 个装置时,会被弹到第 \(i+ ...
- Linux 配置ip 子接口 多网卡绑定
linux系统配置ip地址,图形化界面略过,这里只介绍文本行.做以下设置注意是否有此权限 查看当前路由及网关信息: [root@localhost ~]# netstat -r Kernel IP r ...
- [jQuery]jQuery链式编程(六)
链式编程 节约代码量 <button>快速</button> <button>快速</button> <button>快速</butt ...
- 1213 - Fantasy of a Summation
1213 - Fantasy of a Summation If you think codes, eat codes then sometimes you may get stres ...
- 在Ubuntu上部署一个基于webrtc的多人视频聊天服务
最近研究webrtc视频直播技术,网上找了些教程最终都不太能顺利跑起来的,可能是文章写的比较老,使用的一些开源组件已经更新了,有些配置已经不太一样了,所以按照以前的步骤会有问题.折腾了一阵终于跑起来了 ...