如何继承父背景以使子列的长度看起来相等答案

【问题标题】：how to inherit parent background to make the child columns appear equal in length如何继承父背景以使子列的长度看起来相等
【发布时间】：2013-04-21 16:00:42
【问题描述】：

当一列碰巧比另一列最高时，我想要一个两列布局，而不用担心背景。

我已经阅读了关于仿列、流式布局的信息，但我想问一下它是否可以这样工作：我有一个“主”元素，其背景为半透明图像（16x17 像素）。主要元素包含 2 个浮动列，左侧浮动左侧，右侧浮动右侧。

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

我不能附上实际情况的截图，除非版主允许我...

非常感谢任何帮助，我正处于陡峭学习曲线的开始！西尔维娅

【问题讨论】：

标签： html css background-image parent-child two-column-layout

【解决方案1】：

您可以使用jsfiddle 或类似的方法对其进行测试。以及firebug 或类似的。

关于您的问题：

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

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

overflow:hidden; 你的浮动容器。在您的情况下，类为 .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. 
}

希望这会有所帮助。

【讨论】：