div並排在容器中

Question

我試圖並排創建兩個div。我試圖在.holder-right中將float: left放入.holder-left和float: right，但它們在父級持有者和內容div之外浮動。

我該如何解決？

CSS

div.holder { 
    margin: 10px 10px 0 10px; 
    width: 1002px; 
} 

div.holder > div.holder-left { 
    float: left; 
} 

div.holder > div.holder-right { 
    float: right; 
} 

HTML

<div class="holder"> 
    <div class="holder-left"> 
     aufgftf ftftfy 
    </div> 
    <div class="holder-right"> 
     afytf fttyfttyty 
    </div> 
</div> 

Answer 1

一個快速和骯髒的解決方案是通過添加overfow屬性修改div.holder。這將允許外部div正確包裝內部浮動div。我不記得爲什麼，但是這個解決方案有一些古怪的東西，所以請看下面的「clearfix」解決方案。

div.holder { 
    margin: 10px 10px 0 10px; 
    width: 1002px; 
    overflow: hidden; 
} 

---

雖然，你應該正確地實現了 「clearfix」 的解決方案。 （在這裏，你不需要使用overflow屬性如上圖所示）。下面是我用clearfix解決的CSS：如下圖所示

.group:after{ 
    visibility: hidden; 
    display: block; 
    content: ""; 
    clear: both; 
    height: 0; 
} 

* html .group{ zoom: 1; } /* IE6 */ 
*:first-child+html .group { zoom: 1; } /* IE7 */ 

然後改變你的HTML的浮動的div。您只需將group類添加到包含浮動元素的div中即可。這將確保浮動的divs完全留在外層。

<div class="holder group"> 
    <div class="holder-left">aufgftf ftftfy</div> 
    <div class="holder-right">afytf fttyfttyty</div> 
</div> 

Here is the source for this clearfix solution.