html - 双列 css 布局不相互覆盖底部空间

Question

您好，我正在尝试制作一个简单的 2 列布局(实际上是表格转换)，但遇到了问题。 HTML:

<div class="obj_container" style="margin-top: 120px;">
        <div class="obj_title">
        Title:
        </div>
        <div id="obj">
        Bla Bla Bla<br />
        Bla Bla Bla<br />
        Bla Bla Bla<br />
        Bla Bla Bla<br />
        Bla Bla Bla<br />
        </div>
</div>

CSS:

.obj_container {
    width: 900px;
    height: auto;
    clear: both;
    float: left;
}

.obj_title {
    width: 60px;
    height: auto;
    float: left;
}

.obj {
    width: 820px;
    height: auto;
    padding: 10px;
    float: left;
}

问题是，当里面的文本超过 1 行时，即使我指定了两个 div 的宽度，它也会在下面；一个解决方案可能是指定两个 div 的高度，但这不会动态适应内容。 谢谢

Answer 1

您正在使用 <div id="obj"> ，然后 .obj .

改为使用 <div class="obj"> .

顺便说一句，您正试图将 float 包含在 .obj_container 中, 所以 clear: both不是你需要的。将其替换为 overflow: hidden ，或使用 clearfix .