Html 如何使用内部浮动div扩展div

我有以下HTML：

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

这是典型的问题

例如，如果在2个浮动div之后添加了一个div，并应用了

clear:both

属性，则应该会发现高度扩展，即

<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>

然而，现在使用

display

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

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

将为您提供相同类型的布局，即

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

---

使用纯CSS，您可以在假背景下实现这一点，但这在很大程度上取决于您的设计。您可以创建一个JSFIDLE.net问题示例吗？它似乎会自动扩展。

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

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