css - 具有自动调整宽度的 float DIV

Question

我目前有以下 HTML:

<div class="clearfix">
   <div style="width:33%;float:left">content</div>
   <div style="width:33%;float:left">content</div>
   <div style="width:33%;float:left">content</div>
</div>

当一行有3个div时，因为我为每个指定了一个百分比宽度，所以它们都占满了父宽度的宽度。我想要实现的是让 float div 自动调整它们的宽度(即没有硬编码百分比宽度)取决于线上有多少 div。例如，如果有 2 个 div，则每个将占据父级整个宽度的一半(即 50%)。如果有 3 个 div，则为 33%。

float div 是否可行？如果没有，我还可以使用哪些其他方法来实现这种流体布局？我考虑让父级使用“表格”显示，内部 div 使用“表格单元格”显示，但随后父级不再占用其可用宽度的 100%。

Answer 1

您的表格方法对我来说效果很好，只记得从子 div 中删除 float:left，请参阅我的工作 demo .