事業部在事業部：佈局問題

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 elemnt只包含浮動元素，而浮動元素不會拉伸它們的父元素，因此.title元素呈現就像它是空的一樣。

Answer 3

在這裏你錯誤的原因你錯過了DIV的清晰的一面。如果你使用div：float：left/right，爲了開始新行，你必須使用clear：both和div。

- 只需添加一個DIV與清除：兩個;

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