Question

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

我已经阅读了有关人造柱，液体布局的内容，但我想问一下它是否可以这样工作：我有一个“主”元素，半透明图像作为背景（16x17px）。主元素包含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>

我无法附上实际情况的截图，除非主持人给我许可......

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

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

希望这有帮助。

如何继承父背景以使子列的长度相等

1 个答案: