css - 调整大小或换行的 Div

Question

我正在尝试将一堆 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 的浏览器)？

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>

Here is a working example