Question

我创建了以下布局：

<div class="title" id="m1">
    <div class="chkbx">something</div>
    <div class="name">
        <a href="#" onclick="doSomething('1');">Dummy #1</a>
    </div>
</div>
// .. the div above repeats several times

我正在使用下面的CSS：

div.title { border: 1px black solid; }
div.chkbx {
    clear:both;
    float:left;
    padding:2px;
    text-align:right;
    width:5%;
}
 div.name {
    float:left;
    width: 50%;
}

并期望所有class=title周围都有边框，但只能在顶部看到一些奇怪的线条。请让我知道我做错了什么。

非常感谢！

Answer 1

您可能正在浮动内容。在容器上设置overflow: hidden。

http://complexspiral.com/publications/containing-floats/解释了为什么会出现这种行为
http://www.ejeliot.com/blog/59列出了避免它的各种方法，其中大部分都比上述方法更好，包括溢出方法。

Answer 2

尝试使用.title样式在clear: both;中再添加一个元素。

您的.title元素仅包含浮动元素，浮动元素不会拉伸其父元素，因此.title元素将呈现为空白。

Answer 3

这里你错误的原因是你错过了DIV的明确方面。如果你使用div与float：left / right，为了开始新行，你必须使用clear：both with div。

- 只需添加一个明确的DIV：BOTH;

<div class="title" id="m1">
<div class="chkbx">something</div>
<div class="name">
    <a href="#" onclick="doSomething('1');">Dummy #1</a>
</div>
<div style="clear:both;"></div>
</div>

Div in Div：布局问题

3 个答案: