html - 如何继承父背景以使子列看起来长度相等

Question

我想要一个两列的布局，而不用担心一列恰好比另一列高时的背景。

我已经阅读了有关人造列、液体布局的内容，但我想问您是否可以这样工作:我有一个“主”元素，其背景是半透明图像 (16x17px)。主元素包含 2 个 float 列，左侧向左浮动，右侧向右浮动。

.main {
width: 1024px;
background-image: url();
padding:10px 0px 10px 0px;
margin: 0 auto;
}
.colleft {
float: left;
width: 618px;
padding:10px 5px 10px 10px;
}
.rightbar {
margin: 0 auto;
width: 50em;
float: right;
padding:10px 5px 10px 10px;
width: 376px;
}
.titolo {
text-align: center;
font-family: ClaireHandRegular, Helvetica, sans-serif;
font-size: 30px;
color: #35231e;
line-height: 100%;
padding:10px 0px 0px 0px;
}
.contenuto {
text-align: left;
font-family: ClaireHandRegular, Helvetica, sans-serif;
font-size: 25px;
color: #35231e;
line-height: 100%;
padding:20px 0px 0px 0px;
}

我的 HTML 中有问题，我看不到哪里。我离解决方案还远吗？

<div class="main">
    <div class="colleft">
        <div class="titolo">ARTICLES</div>
        <div class="contenuto">CONTENT</div>
    </div>
    <div class="rightbar">
        <div class="contenuto">RIGHT BAR CONTENT</div>
    </div>
</div>  

Answer 1

您可以使用 JSFiddle或类似的测试它。以及 Firebug 或类似软件。

当你使用 float 时，你必须包含你的 float 。

为此，您可以使用多种技术。其中，一个简单的:

overflow:hidden; 你的 float 容器。在您的例子中，元素为 .main.

试试这个:

.main {
 width: 1024px;
 background-image: url();
 padding:10px 0px 10px 0px;
 margin: 0 auto;
 background-color: red; //<-- added just to test.
 overflow:hidden; //<-- to contain the floats. 
}