如何将一个div分成两部分，其中一个div占用剩余空间？

如何在 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中文网其他相关文章！