Question

我正在寻找一种方法来自动填充宽度为x1且高度为y1的div以及其他div元素，每个div元素的宽度为x2，高度为y2

所以html看起来像：

<div class="parentdiv">
    <div class="subdiv"></div>
    <div class="subdiv"></div>
    <div class="subdiv"></div>
    ...
</div>

根据显示所有信息所需的数量，动态追加细分。我希望它们水平填充parentdiv中的空格，然后当它们到达边缘时移动到下一行。

现在他们只是垂直堆叠在一起，浪费了很多空间。是否有针对此的跨浏览器解决方案？

Answer 1

<style type="text/css">
    .parentdiv .subdiv { display: inline-block; }
</style>

请注意，IE7存在div内联的问题，因此您可能需要创建这些子区域（仍然使用inline-block）;

或Brian的float:left;

解决方案

Answer 2

默认情况下，div将占用其父容器的整个宽度。您可以通过向float: left课程添加subdiv来解决此问题。只需确保清除容器末端的浮子。像这样：

<style type="text/css">
.parentdiv .subdiv { float: left; }
</style>

<div class="parentdiv">
    <div class="subdiv"></div>
    <div class="subdiv"></div>
    <div class="subdiv"></div>
    ...
    <div style="clear: both;"></div>
</div>

用Divs水平和垂直填充空间

2 个答案: