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有可能吗？如果没有，我可以用什么其他方法来实现这种类型的流体布局？我考虑让父母使用'table'显示，内部div为'table-cell'显示，但是父对象停止占用100％的可用宽度。

Answer 1

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

Answer 2

您可以使用jQuery来实现样式中的动态更改：

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

有关示例，请参阅this demo。

Answer 3

你可以尝试使用像

这样的CSS

display:box;

前父母div。和

box-flex:1

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

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

3 个答案: