如何在 XHTML/CSS 中使用 Div 实现完美的水平分割
您已将 div 嵌套在宽度为 100% 的外部 div 内,并且您希望将嵌套 div 的宽度分成两部分,一个 div 占据另一个 div 后面的剩余空间。问题是您不想指定第一个 div 的宽度,因为它的大小取决于其内容。
隐藏溢出的魔力
The解决方案在于使用溢出:隐藏;。此 CSS 属性可防止与浮动元素相邻的元素超出浮动范围。
HTML 结构
按如下方式调整 HTML,用合适的 ID 替换 # 字符:
<div>
CSS 样式
实现以下 CSS:
#outer { overflow: hidden; width: 100%; border: solid 3px #666; background: #ddd; } #inner1 { float: left; border: solid 3px #c00; background: #fdd; } #inner2 { overflow: hidden; border: solid 3px #00c; background: #ddf; }
IE 6 支持
支持 IE 6 的可选 CSS(如果需要):
<!--[if lte IE 6]> <style type="text/css"> #inner2 { zoom: 1; } #inner1 { margin-right: -3px; } </style> <![endif]-->
结果
通过这些更改,#inner2 将占据剩余的水平空间,确保嵌套 div 之间可用宽度的整齐且动态的分割。
以上是如何将一个div分成两部分,其中一个div占用剩余空间?的详细内容。更多信息请关注PHP中文网其他相关文章!