如何在具有溢出：隐藏的嵌套 Div 中实现可变宽度分布？

如何在嵌套 Div 中实现可变宽度分布

在 xHTML/CSS 中，经常会遇到需要多个嵌套 div 的场景水平对齐，内部 div 根据其内容具有不同的宽度。这个问题探讨了一个常见的挑战：当内部 div 的宽度未指定且取决于其内容时，如何将剩余的可用水平空间分配给其中一个。

要实现此效果，我们可以利用 CSS 属性“溢出：隐藏；”。此属性可防止与浮动元素相邻的元素延伸到浮动后面，从而创建受控布局。

考虑下面的 HTML 结构：

<div>

要配置布局，可以使用以下 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;
}

通过设置“溢出：隐藏;”在“outer”div 上，我们强制浮动的“inner1”div 保留在“outer”div 内。然后，“inner2”div 填充剩余的水平空间。

为了确保此布局在旧版本的 Internet Explorer（IE 6 和 7）中工作，可以将以下附加 CSS 与 HTML 条件注释一起使用：

<!--[if lte IE 6]>
<style type="text/css">
    #inner2 {
        zoom: 1;
    }

    #inner1 {
        margin-right: -3px;
    }
</style>
<![endif]-->

此样式可确保“inner2”div 在 IE 6 中正确填充剩余空间，并调整“inner1”div 的边距以补偿“zoom”属性引入的间隙。

使用此配置，“inner1”div 将根据其内容动态调整其宽度，“inner2”div 将占据剩余的可用宽度，创建一个布局，其中 div 与其各自的宽度水平对齐。

以上是如何在具有溢出：隐藏的嵌套 Div 中实现可变宽度分布？的详细内容。更多信息请关注PHP中文网其他相关文章！