用CSS将文字放置于div的底部

2016-02-19 19:50 15 1 收藏

下面是个简单易学的用CSS将文字放置于div的底部教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - Web开发 】

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

!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/webkaifa/)

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

延伸阅读
标签: Web开发
现在编写xhtml,我们强烈不推荐此种方法,应该是id,class综合应用。此文章只是讲述一种思维,并非建站过程中的方法! 用标准件的方式来组装网页DIV布局。我把class分为2种:布局class;风格class。 布局class是骨架,风格class是衣服。 举个例子:比如布局中的左栏。首先它的属性有:是左栏,宽度,背景颜色,字体颜色等。 1、首先会定义一...
标签: Web开发
CSS打造多彩文字链接 td { font-size : 12px; font-family : 宋体; } a { font-family: "宋体"; font-size: 9pt; text-decoration: none} .t1{ color: #CC0000;text-decoration: underline } .t2{ text-decoration : none; color:#006699; } .t3 { color: #006600; text-decoration: underline overline} .t4 { color: #0066FF; t...
标签: Web开发
CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案。在CSS的世界里,似乎没有完美这种说法。所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧。 先说我们为什么会使用到这个CSS底部布局解决方案: 当做一个页面时,如果页面内容很少,不足于填充一屏的窗口区域,按普通的布局,就会出现下面图片中的样子(也就是底...
标签: Web开发
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、h...
标签: Web开发
WEB标准 是一系列标准的集合,并不是仅DIV CSS布局就可以实现。以CSS网页布局只是标准的基础之一。DIV CSS布局只是一种通俗的称呼罢了。而我们学习的目标在于以XHTML建立良好的语义化的结构,结合CSS最大程度使表现与内容相分离。 一位网友对W3C标准、重构与CSS布局的理解: 不知道从什么时候开始,在网络上到处可以看到div css,...

经验教程

146

收藏

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