javascript - 用div水平和垂直填充空间

Question

我正在寻找一种方法来自动填充宽度为 x1 和高度为 y1 的 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 内联的问题，因此您可能需要制作那些 subdiv、subspans（仍在使用inline-block）；

---

或者布赖恩的解决方案float:left;

Answer 2

默认情况下，div 将占据其父容器的整个宽度。您可以通过将 a 添加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>