css - 如何在带边框的动态高度内容区域内正确显示两个并排的 div？

Question

我有一个带有边框的主要内容区域 div。在这个区域内，我想并排放置 2 列。现在我的 html/css 看起来像

<div id="main-area">
    <div class="left-subcontent">left content</div>
    <div class="right-subconent">right content</div>
</div>

#main-area 
{
    margin-left: 160px;
    border-left: solid;
    border-bottom: solid;
    border-right: solid;
    min-height: 250px;
    padding: 15px;
    border-color: #C9C299;
}

.left-subcontent { float: left; width: 200px; }
.right-subcontent { float: left; width: 200px; }

问题是，如果它们都向左浮动，如果左侧或右侧区域的内容长于 250 像素，则主区域的边框会在这些内容区域的中间流动(我有一种感觉，如果我添加也会在这些 div 内部流动的页脚)。我需要的是主要区域的边界围绕着里面的所有内容。

有谁知道如何在 2 个动态大小的列(其中任何一个都可以比另一个包含更多内容)周围完成边框。

Answer 1

您必须添加一个 float 终止 div:

<div id="main-area">
    <div class="left-subcontent">left content</div>
    <div class="right-subconent">right content</div>
    <div class="clear"></div>
</div>

#main-area 
{
    margin-left: 160px;
    border-left: solid;
    border-bottom: solid;
    border-right: solid;
    min-height: 250px;
    padding: 15px;
    border-color: #C9C299;
}

.left-subcontent { float: left; width: 200px; }
.right-subcontent { float: left; width: 200px; }
.clear { clear: both; }

这样就可以了。