CSS控制文字在Div最底部显示

 　　以下技巧相信是比较实用的，让一行文字始终显示在某个Div的最底部，做前端开发，肯定什么情况都要碰到，虽然这个不常用，不过也是会用到的。用到position:relative、position:absolute;属性。text-align:center;这行是定义显示在最底行的文字水平居中，可以不设置，但文字会靠左显示。

　　本代码适用Div高度固定，也就是定义了高度的情况下，其实不定义高度的时候，它也是显示在最底部，因为没有高度的情况下，Div会自动适应容器内的内容。

时间： 2024-12-29 16:41:24

CSS控制文字在Div最底部显示的相关文章

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

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢? 以下是引用片段:    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/ht

CSS控制文字溢出时的自动隐藏方法

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

CSS控制文字的显示与隐藏引出的BUG

css|控制|显示 这一段CSS代码相当简单,目的就是想用CSS来控制某段文字的显示与隐藏.起初我采用了下面的代码,令人不可思议的是,它们在我的IE6.0上居然没有任何反应,大家不信可以亲自试验一下. <style type="text/css">a {font-size:12px;text-decoration:none;height:50;}a:hover {text-decoration:none;}a span {font-size:12px;display:non

CSS控制图片自适应Div大小

  CSS让图片自适应Div大小,对宽度执行CSS的expression指令,这个指令会在客户端被执行,当用户最大化显示窗口或缩放窗口时控制图片按比例适应Div宽度的大小.以下来看完整的示例代码如下:   浏览器窗口最大化后可看到图片自适应的效果,请替换IMG标签中的图片地址为一个有效的图片地址,以便查看效果.

CSS控制文字超出部分显示省略号方法

测试浏览器: IE6/7/8/9.opera12.02.firefox15.0.1.chrome  代码如下 复制代码 <p style="width:200px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">省略我吧 省略我吧! 省略我吧!省略我! </p> 如果我们要给p标签定义text-overflow:ellipsis就可以这么写:  代码如下 复制代码 p {      

css控制文字长度:css 控制文字定位

以下内容为程序代码  <style>    p.double {line-height: 2}    p.right {text-align: right}    p.center {text-align: center}    p.justify {text-align: justify}    p.indent {text-indent: 1cm}    p.capitalize {text-transform: capitalize}    p.up {text-transform: u

JS+CSS设置img在DIV中只显示Img垂直居中的部分_javascript技巧

一个Div中显示Img,img的宽和Div相同,但高不固定,要求只显示Img垂直居中的部分. 示例:   原图: 代码实现: 复制代码 代码如下: <div style="width: 190px; height: 100px; overflow: hidden;"> <img src="http://beijing.timeoutcn.com/UserFiles/Images/2013-10-21/20131021104840077cover-22-1.j

CSS控制 如何让12px以下的文字正常显示

css|控制|显示 在网页中如何让大小为12px以下的文字正常显示可以有很多方式,例如 NT 系统支持这样的: 11px 运行代码框 <style by tesion.>p{font: 11px tahoma}</style><p>tahoma font style, size 11px. 中文字体 </p>   [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] 中文运行代码框 <style by tesion.>p{font: 1

CSS控制的内容超过容器宽度后显示省略号

css|控制|显示 一般我们看到的比如新闻列表,为了使文字不回行,控制字数,会通过程序让多余的字符显示省略号,我们只使用CSS可以达到同样的效果,虽然不完美. li {    width:50px;    white-space:nowrap;    text-overflow:ellipsis;    overflow: hidden;    } 首先是一个容器,可以是div,li,td等等,先定义宽度,"white-space:nowrap"是强制在一行内显示所有文本,不回行.&q