具有自动调整宽度的浮动 DIV答案

【问题标题】：Floating DIVs with auto-adjusting widths具有自动调整宽度的浮动 DIV
【发布时间】：2013-07-25 06:31:16
【问题描述】：

我目前有以下 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。例如，如果有 2 个 div，那么每个 div 将占据父级整个宽度的一半（即 50%）。如果有 3 个 div，则为 33%。

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

【问题讨论】：

标签： css html css-float width

【解决方案1】：

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

【讨论】：

好吧，我有没有觉得自己很愚蠢。我想我可能已经将浮点定义留在那里了。谢谢尼尔森！
别费心了，我们都会时不时地俯瞰，但在这里你会发现很多眼睛可以发现它们！。
当你同时指定了height 和overflow-y: scroll; 时，你如何让它很好地发挥作用？

【解决方案2】：

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

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

示例见this demo。

【讨论】：

【解决方案3】：

你可以试试css之类的

display:box;

前父 div。和

box-flex:1

用于嵌套。有关示例，请参阅 this link。

【讨论】：