首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网络编程
CSS/HTML
正文
绝对定位的DIV宽度自动适应的一个方法
所属分类：
网络编程
/
CSS/HTML
阅读数： 834
收藏 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需再刷新一下页面才能执行
]
更多精彩内容
其他人还在看
input文本框样式代码实例
input文本框样式代码实例
评论 0
收藏 0
赞 0
分享
div+css实现自适应宽度按钮
div+css实现自适应宽度按钮
评论 0
收藏 0
赞 0
分享
h1标签的使用技巧
h1标签的使用技巧
评论 0
收藏 0
赞 0
分享
base href 使用方法详解
base href 使用方法详解
评论 0
收藏 0
赞 0
分享
html label标签的使用教程
html label标签的使用教程
评论 0
收藏 0
赞 0
分享
使用CSS不用程序实现文字自动截断 用省略号代替
使用CSS不用程序实现文字自动截断 用省略号代替
评论 0
收藏 0
赞 0
分享
CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法
CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法
评论 0
收藏 0
赞 0
分享
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
评论 0
收藏 0
赞 0
分享
CSS图片拼合生成器只需上传zip包即可
CSS图片拼合生成器只需上传zip包即可
评论 0
收藏 0
赞 0
分享
用iframe margin实现调用其他网页的某一区域的方法
用iframe margin实现调用其他网页的某一区域的方法
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
让所谓“网络营销”的人哭笑不得：一个圈外人士的真实网赚经历
网络赚钱的几种模式总结
广告如何投放才最正确有效？我就给你3个建议！
SEO赚钱之道：11种可以让你盈利的SEO实业方法
百度图+推广上线 如何在图片上投放广告_图片屏蔽不想出现图+广告
网站赚钱这么难吗 你学会了多少？
站长故事
更多
分享我经营网站的方法心得,希望大家能学到知识
职场中12种经典实用的管理方法和工具
精品内容永不过时，个人站长应自我审视
运营网站需要修炼三层内功 很多人都维持在第一层上
做好网站维护 持续吸引用户浏览
草根站长告诉你通过互联网赚钱到底难不难(真实经历)
