首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网络编程
CSS/HTML
正文
绝对定位的DIV宽度自动适应的一个方法
所属分类：
网络编程
/
CSS/HTML
阅读数： 752
收藏 0
赞 0
分享
刚刚在一个页面上用到了position:absolute;
这样的代码在IE7和FIREFOX都不会有问题，但是在IE6以下的会不支持；
<!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"><div style="position:absolute; background:#FF0033; border:1px solid #996600; padding:20px 50px; top:250px; left:100px; right:100px;"> 这是一个测试 </div>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
于是针对IE6我又加了一个<hr /> 这下可以了；
<!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"><div style="position:absolute; background:#FF0033; border:1px solid #996600; padding:20px 50px; top:250px; left:100px; right:100px;"> 这是一个测试<hr /> </div>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
但是hr我不想在页面上出现；于是加了一个b
<!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"><div style="position:absolute; background:#FF0033; border:1px solid #996600; padding:20px 50px; top:250px; left:100px; right:100px;"> 这是一个测试<b style="float:right; height:0; overflow:hidden"></b> </div>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
这是一种方法；是我实在不知道应该怎么处理这东西的一种方法；谁知道真正的方法是什么；麻烦告诉我一下；
这是最后的效果；
<!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"><div style="background: #FFFDEC;-moz-opacity:0.9; filter:alpha(opacity=90); position:absolute; border:1px dashed #999; top:250px; padding:20px 50px; left:100px; right:100px; text-align: center; font-size:12px;"> 这是一个测试 <b style="float:right; height:0; overflow:hidden"></b> </div>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
更多精彩内容
其他人还在看
推荐深入理解css中的position定位和z-index属性
推荐深入理解css中的position定位和z-index属性
评论 0
收藏 0
赞 0
分享
不错的10个你未必知道的CSS技巧
不错的10个你未必知道的CSS技巧
评论 0
收藏 0
赞 0
分享
一点小小的创意css鼠标放上去则显示电话号码
一点小小的创意css鼠标放上去则显示电话号码
评论 0
收藏 0
赞 0
分享
固定表格的高度超过指定高度就隐藏的方法
固定表格的高度超过指定高度就隐藏的方法
评论 0
收藏 0
赞 0
分享
推荐个Css的filter常用滤波器属性及语句大全
推荐个Css的filter常用滤波器属性及语句大全
评论 0
收藏 0
赞 0
分享
淘宝段正淳的css笔记大全第1/4页
淘宝段正淳的css笔记大全
评论 0
收藏 0
赞 0
分享
CSS实现的一个图片放大展示的一种思路
CSS实现的一个图片放大展示的一种思路
评论 0
收藏 0
赞 0
分享
用css滤镜实现的文字描边效果的代码
用css滤镜实现的文字描边效果的代码
评论 0
收藏 0
赞 0
分享
用css实现的带阴影的表格效果的代码
用css实现的带阴影的表格效果的代码
评论 0
收藏 0
赞 0
分享
又一实用的常用CSS缩写语法收集
又一实用的常用CSS缩写语法收集
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
站长VS微商 你选择哪个？
站长故事实战：淘宝买关键词排名SEO服务攻略介绍
全面剖析日赚500元项目的骗局
新手站长谈谈如何做好广告联盟
第三次零售革命 - 智慧零售
网赚如何避免上当受骗?网赚骗子如何防?
站长故事
更多
美团副总裁杨俊：做O2O的4个关键节点 会高效率地花钱
iPhone创造了黄牛 还是黄牛捧红了iPhone？
阿里IPO在即，看阿里与京东战略和经营之比
站长从菜鸟到资深必经过程
十年了!一个依靠设计师们热情支撑起的网站
我对互联网VC的10点看法 知己知彼百战不殆
