把兩個元素放在海誓山盟的旁邊，清楚：兩個選擇？

Question

當我想兩個元素的位置，旁邊給對方，這樣

<div class="wrapper"> 
    <div class="left"> ... </div> 
    <div class="right"> ... </div> 
</div> 

我可以使用下面的CSS：

.left, .right { 
    display:inline; 
    float:left; 
} 

但如何使包裝調整它的高度與孩子元素，沒有clear:both屬性？

Answer 1

您可以使用overflow風格。通過任何大小不指定爲父母，沒有什麼實際溢出，但它仍然會讓它包含其子：

.wrapper { 
    overflow: hidden; 
} 

邊注：被設置爲浮動元素上設置display:inline是毫無意義作爲浮動元件是alwas塊元素：

.left, .right { 
    float:left; 
} 

（使用上浮動元素display:inline但是被用於對抗在IE6雙餘量錯誤，因此它可以在舊的代碼中找到）

Answer 2

由於未明確指定高度，因此設置overflow:auto將使父項包含子項。

.wrapper { 
    overflow:auto; 
} 

jsFiddle here

....... 前 ..................... 後

.left, .right { 
    display:inline; 
    float:left; 
    height:50px; 
    width:50px; 
    background:blue; 
    margin:10px; 
} 
.wrapper { 
    overflow:auto; 
    background:red; 
    width:140px; 
    display:block; 
}