0

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

我已经阅读了关于假列、液体布局的信息，但我想问一下它是否可以这样工作：我有一个“主”元素，背景是半透明图像（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>

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

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

4

1 回答 1

2

您可以使用jsfiddle或类似的工具来测试它。以及firebug或类似。

关于你的问题：

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

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

overflow:hidden;你的浮动容器。在您的情况下，带有 class 的元素.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. 
}

希望这可以帮助。

于 2013-04-27T15:58:52.270 回答