如何「收縮包裝」div圍繞它的浮動子女

我正在購物車網站上工作，並試圖使搜索結果響應。任何低於桌面分辨率的結果我都希望結果成爲儘可能多的項目（在大多數情況下爲3），我希望它們能夠集中到一個電話中。如何「收縮包裝」div圍繞它的浮動子女

我遇到的問題是，我似乎無法讓父div與它的子節點具有相同的寬度，我也不能將它居中。

我試過display: inline-block，它給出了div的尺寸，但它佔據了寬度的100％。

以下是我在運行的一個例子：有沒有人來完成這樣的事情之前

http://jsfiddle.net/0jnjum30/1/

？如果可能，我想完全用CSS來完成。

來源

2015-01-08 Brandon Shega

這是因爲內聯元素沒有寬度。你應該讓你的孩子內嵌塊，而不是父母。一旦你的父母有寬度，你可以居中。

.parent { 
    margin: 0 auto; 
    text-align: center; 
    width: 300px; 
    display: block;  
} 

.child { 
    display: inline-block; 
    width: 100px; 
}

如果更新了提琴：http://jsfiddle.net/gez46x0b/1/額外的包裝是必要的具有最後一個元素是左對齊居中列表。

來源

2015-01-08 15:47:13 stekhn

雅，我害怕這一點，我很難對子元素進行內聯塊處理，因爲他們覆蓋了絕對定位的東西，當我這樣做時，事情變得非常不可靠。儘管如此，我會嘗試找出使用內聯塊的方式，感謝您的幫助。 –

內聯塊和絕對定位覆蓋問題在哪裏？所有內聯塊的行爲都像塊一樣。只有一個內嵌塊父項沒有意義。什麼讓你的孩子浮動的是'float：left' – stekhn

問題是由於某些原因，當他們是內聯塊，你懸停在他們（導致覆蓋顯示），他們移動約20像素，所以每一個得到了移動的盤旋，我不知道爲什麼。 –

如何「收縮包裝」div圍繞它的浮動子女

回答

相關問題