調整大小或包裝的div

我試圖把一堆div放在另一個div內，並且執行類似於表格列的大小調整以適應可用空間，但在這種情況下，如果div內部縮小到他們將包裝的最小尺寸。調整大小或包裝的div

我有類似

<div style="width: 100%"> 
    <div style="float: left; min-width:30px; padding: 4px">Text 1</div> 
    <div style="float: left; min-width:30px; padding: 4px">Text 2</div> 
    <div style="float: left; min-width:30px; padding: 4px">Text 3</div> 
    <div style="float: left; min-width:30px; padding: 4px">Text 4</div> 
    <div style="float: left; min-width:30px; padding: 4px">Text 5</div> 
</div>

和不正確的包裝，但似乎並沒有讓當有空間，以適應他們都在同一行內的人展開。現在可以做到這一點（記住我必須支持尚未實現FlexBox的瀏覽器）嗎？

來源

2013-05-01 Paul Tomblin

[？這有什麼好處給你（http://jsfiddle.net/ekGYV/） – musefan 2013-05-01 15:59:21

@musefan，這是真棒！讓它成爲答案。 – 2013-05-01 16:01:35

我不確定這是否正是您想要的，但您可能需要爲innner元素設置基於百分比的寬度。

.cell { 
    width:19%; 
}

與HTML這樣的：

<div style="width: 100%"> 
    <div class="cell" style="float: left; min-width:30px; padding: 4px">Text 1</div> 
    ... 
</div>

Here is a working example

來源

2013-05-01 16:03:35 musefan

哦，廢話 - 我忘了寬度不包括邊距，邊框或填充，所以如果我看到「寬度11％;」除非我刪除邊距和填充，否則我實際上無法獲得9個元素。 – 2013-05-01 17:13:16

調整大小或包裝的div

回答

相關問題