CSS依賴其浮動子容器擴展父容器

我有一個容器，其ID爲#parent，我動態地添加了幾個類.child的圖像，固定寬度和高度可以假定爲.child元素。CSS依賴其浮動子容器擴展父容器

我希望所有的.child浮在一起，以建立一個水平列表。我如何獲得#parent自動調整到所有.child的總寬度？

非常感謝！

PS：我需要一個純CSS的解決方案..

小提琴：http://jsfiddle.net/u8GPN/1/

解決方案可以在這裏找到：http://jsfiddle.net/u8GPN/28/

來源

2013-03-16 wzr1337

你想要父母的寬度達到什麼限制？ – Ankit 2013-03-16 07:25:46

在你的小提琴中，你已經爲#view設置了寬度320px，在#parent之後什麼超過了320px？ – Ankit 2013-03-16 07:26:41

你可以讓你的父母inline-block，並添加white-space: nowrap;它：

#parent { 
    display: inline-block; 
    overflow: hidden; 
    border: 1px dashed blue; 
    white-space: nowrap; 
}

http://jsfiddle.net/u8GPN/22/

要動態測試增加一個新塊http://jsfiddle.net/u8GPN/23/

來源

2013-03-16 07:21:55 dfsq

我在這個小提琴中用#view模擬頁面溢出：http://jsfiddle.net/u8GPN/27/ – wzr1337 2013-03-16 08:32:02

非常感謝您解決我的問題 – wzr1337 2013-03-16 08:32:25

你也可以給position: absolute的#parent div來解決跨瀏覽器支持的問題。（或white-space: nowrap去如圖@ dfsq的職位）

#parent { 
    display : block; /* (or) inline-block */ 
    overflow : hidden; 
    border: 1px dashed blue; 
    position:absolute; /* Doesn't extend the width more than the page's width */ 
}

Working Fiddle

正如你說，.child元素有固定的寬度和高度，你需要給#view高度明確等於.child元素高度，佔據佈局空間。

來源

2013-03-16 07:31:18

CSS依賴其浮動子容器擴展父容器

回答

相關問題