如何用CSS让文字居于div的底部

2016-02-19 23:21 142 1 收藏

下面请跟着图老师小编一起来了解下如何用CSS让文字居于div的底部,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - Web开发 】

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title无标题文档/title
style type="text/css"
#txt{

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

 height:300px;
 width:300px;
 border:1px solid #333333;
 text-align:center;
 position:relative

}
#txt p{
 position:absolute;
 bottom:0px;
 padding:0px;
 margin:0px
}
/style
/head

body
div id=txt
paadsad/p
/div
/body
/html

来源:https://www.tulaoshi.com/n/20160219/1629735.html

延伸阅读
标签: Web开发
CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案。在CSS的世界里,似乎没有完美这种说法。所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧。 先说我们为什么会使用到这个CSS底部布局解决方案: 当做一个页面时,如果页面内容很少,不足于填充一屏的窗口区域,按普通的布局,就会出现下面图片中的样子(也就是底...
标签: Web开发
引言: 引用一本书中的一段文字:当我第一次开始学习汉语时,我的家庭老师老王给了我一本汉英字典、一本汉语语法书和一本初级教程。但是,他将这些书放 在一个书筐里,并说到下周才能派上用场。在第一周,他只教我听和记一些短语。在开始严格有序的学习前,他要我学会如何复述一些短评。请问,哪里有餐 馆?。请给我来点米饭。这件衣服多少钱?...
标签: Web开发
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、h...
标签: Web开发
WEB标准 是一系列标准的集合,并不是仅DIV CSS布局就可以实现。以CSS网页布局只是标准的基础之一。DIV CSS布局只是一种通俗的称呼罢了。而我们学习的目标在于以XHTML建立良好的语义化的结构,结合CSS最大程度使表现与内容相分离。 一位网友对W3C标准、重构与CSS布局的理解: 不知道从什么时候开始,在网络上到处可以看到div css,...
标签: Web开发
文字隐藏 应用广泛,但常用的方法没有什么亲和力。 常用文字隐藏方法的缺陷: 1、display:none 这种方法搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略; 屏幕阅读器会忽略被隐藏的文字。 2、visibility: hidden 这种方法隐藏了文字却仍然占据物理空间。 更好的方法: overflow:hidden .class{ display:block;/*统一转...

经验教程

32

收藏

21
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部