css - 调整大小或换行的 div

Question

我正在尝试将一堆 div 放入另一个 div 中，并执行类似于 table 列将调整大小以适应可用空间的方式，但在这种情况下，如果内部 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 的浏览器）？

Answer 1

我不确定这是否正是您想要的，但您可能希望为内部元素设置基于百分比的宽度。

.cell {
   width:19%;
}

像这样使用您的 HTML：

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

这是一个工作示例