使用CSS，設置容器寬度覆蓋浮動元素

什麼我試圖現在要做的，是創造適應其寬度以適合元素的容器（含浮動元素）..使用CSS，設置容器寬度覆蓋浮動元素

最簡單的例子我可以想到的是：一個容器中充滿了300px * 300px的浮動div。只要div不填滿一行，容器的寬度（同時清除）與div的組合寬度相同，或1 div = 300px，2 divs = 600px等等。但是，如果div不適合放在一行上，那麼它們會繼續下一行，並且容器的寬度仍然保持在100％，即使第一行的div只佔用了95％。

有沒有一種純CSS的方式，使容器不超過其內容？

#main { 
    float: left; 
    background-color: #f00; 
} 

#main > :last-child:after { 
    clear: both; 
} 

.float { 
    width: 150px; 
    height: 150px; 
    float: left; 
    background-color: #00f; 
} 

<div id="main"> 
    <div class="float"></div> 
    <div class="float"></div> 
    <div class="float"></div> 
    <div class="float"></div> 
    <div class="float"></div> 
    <div class="float"></div> 
    <div class="float"></div> 
    <div class="float"></div> 
    <div class="float"></div> 
</div>

這裏有一個的jsfiddle：http://jsfiddle.net/j9A6T/ 你可以失去的紅色部分的權利？

我已經嘗試過在容器上使用float/inline-block/table解決方案，但它們在這種情況下不起作用。

來源

2014-05-21 LGT

「鏈接jsfiddle.net必須被程序代碼所伴隨的代碼已經在的jsfiddle要我貼在這裏。？」是的，那正是信息的意思。 –

如果您想知道，主要的一點是不要強迫回答者打開外部資源來回答問題。那麼，即使在外部鏈接腐爛之後，你的問題也應該具有未來的意義。有這麼多關於這個的元帖子... –

所以告訴他們，然後將這個解釋添加到紅色警告框。代碼是沒有必要的，我已經做了一個工作jsfiddle。這只是迫使我添加更多的帖子或刪除鏈接。 – LGT

是不是這種情況下，一個clearfix（適用於你的容器div）會有所幫助？

.clearfix:after { 
    content: " "; /* Older browser do not support empty content */ 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
}

這裏更多：What is a clearfix?

來源

2014-05-21 00:19:14 Sheraff

對不起，似乎不夠。 – LGT

使用CSS，設置容器寬度覆蓋浮動元素

回答

相關問題