调整大小或包装的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

回答

相关问题