html - 如何扩展带有浮动div的div

Question

我有以下 HTML：

<div id="site_content">
    <div id="left_content">
        text
    </div>
    <div id="right_content">
        <%= image_tag "image.jpg" %>
    </div>
</div>

我的“right_content” div 中的“image.jpg”在垂直方向上比“left_content”中的要大text。“site_content”仅扩展为 的大小，text而我的“image.jpg”被截断。我希望“site_content”扩展到图像的大小。这是我的CSS：

#site_content { 
    width: 950px;
    overflow: hidden;
    margin: 4px auto 0 auto;
    padding: 0;
}
#left_content { 
    float: left;
    text-align: justify;
    width: 444px;
    padding: 20px 0 5px 25px;
    margin: 0;
}
#right_content {
    float: right;
    width: 450px;
    padding: 0;
    overflow: hidden;
}

Answer 1

这是经典的clearfix问题。

例如，如果您在 2 个浮动 div 和应用clear: both属性之后添加了一个 div，您应该会发现高度扩大了，即

<div id="site_content">
    <div id="left_content">
        text
    </div>
    <div id="right_content">
        <%= image_tag "image.jpg" %>
    </div>
    <div style="clear: both"></div>
</div>

您也可以使用 CSS 以更简洁的方式实现它，例如

#right_content:after {
    clear: both;
}

然而，现在使用display属性而不是浮动 div 来实现类似表格的布局更可靠，例如

#site_content {
    display: table;
}
#left_content, #right_content {
    display: table-cell;
}

会给你相同类型的布局，即

             site_content
_____________________________________
|                 |                 |
|                 |                 |
|  left_content   |  right_content  |
|                 |                 | 
|_________________|_________________|