css - 具有自动调整宽度的浮动 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 时，由于我为每个 div 指定了百分比宽度，它们都完全占据了父宽度的宽度。我想要实现的是让浮动 div 自动调整它们的宽度（即没有硬编码百分比宽度），具体取决于在线上有多少 div。例如，如果有 2 个 div，那么每个 div 将占据父级整个宽度的一半（即 50%）。如果有 3 个 div，则为 33%。

浮动 div 可以做到这一点吗？如果没有，我可以使用哪些其他方法来实现这种类型的流畅布局？我考虑让父级使用“表格”显示，内部 div 使用“表格单元格”显示，但随后父级停止占用 100% 的可用宽度。

Answer 1

您的表格方法对我来说效果很好，只需记住float:left从子 div 中删除，请参阅我的工作演示。

Answer 2

你可以使用jQuery来实现样式的动态变化：

var divcnt = $(".clearfix div").length;
var widthInPercent = 100.0 / divcnt;
$(".clearfix div").each(function() {
    $(this).css("width", widthInPercent+"%")
});

有关示例，请参阅此演示。

Answer 3

您可以尝试使用 css 之类的

display:box; 

前父 div。和

box-flex:1

用于嵌套。有关示例，请参阅此链接。