以上->左->右方式定位元素答案

【问题标题】：Position elements in a top->down left->right manner以上->左->右方式定位元素
【发布时间】：2011-02-08 15:18:25
【问题描述】：

我有一个主容器 <div>，其中包含 4 或 5 个其他子容器 <div>s。容器具有固定的高度和固定的宽度。放置子 div 的最佳方式是什么，以便它们以自上而下然后左 -> 右的方式排列？

我试过浮动子 div，但这只是给了我一个左->右然后自上->下的顺序。

基本上我想要这个

[ sub div 1][sub div 3][sub div 4]
[ sub div 2][         ][sub div 5]

当我这样标记代码时：

<div id="container">
    <div class="subdiv">sub div 1...</div>
    <div class="subdiv">sub div 2...</div>
    <div class="subdiv">sub div 3...</div>
    <div class="subdiv">sub div 4...</div>
    <div class="subdiv">sub div 5...</div>
</div>

请注意，子 div 可以具有可变高度但固定宽度。

谢谢，

【问题讨论】：

你必须支持IE6吗？（这可能很重要，有很多 CSS 技巧在 IE6 上不起作用，虽然我们都可能想忽略 IE6，但在某些领域——尤其是大型企业领域——它仍然是一个重要的浏览器。除此之外，更不用说。因此问题。）
为此我们只需要 IE 7 (strict dtd) 及以上版本。

标签： javascript html css

【解决方案1】：

据我所知，没有办法做到这一点。

有一些 CSS3 仅适用于某些浏览器以支持多列布局（-moz-column-width 等），但我不知道它是否适用于内容中的 DIV。而且我相当确定它在 IE7 中不受支持

我的做法是将内容分成 3 列容器

<div id="container">
    <div class='column'>
        <div class="subdiv">sub div 1...</div>
        <div class="subdiv">sub div 2...</div>
    </div>
    <div class='column'>
        <div class="subdiv">sub div 3...</div>
        <div class="subdiv">sub div 4...</div>
    </div>
    <div class='column'>
        <div class="subdiv">sub div 5...</div>
    </div>
</div>

【讨论】：

是的，我害怕不得不拆分它，唯一的原因是子 div 的列表是动态的，并且它们的高度不同使得很难准确计算我应该在哪里拆分它们。我会试着在这条路上想点什么。
您可能想要搜索 jquery 插件或类似的东西，以便在页面呈现后在客户端处理您的内容布局（可能是这样的？welcome.totheinter.net/columnizer-jquery-plugin）。我不得不多次使用这种方法来解决类似的问题
@Damp 很想查看该链接，但它被阻止工作:(。
@ferrari fan 你可以访问 github 吗？ github.com/adamwulf/Columnizer-jQuery-Plugin
感谢您的帮助，我采取了根据分列器的例子进行分列的方法。

【解决方案2】：

在 DIV 上使用这个 CSS：

display: inline-block

【讨论】：

这将和float: left;做同样的事情（排序）
是的，这不符合我的需要。我已修改问题以显示我正在使用的标记类型。
有这个诱人的“删除”链接... ;-)

【解决方案3】：

在本机上执行此操作的唯一方法是使用 CSS3 列（如 Damp 所述），但有一些文章介绍了如何使用 JavaScript 实现类似的效果，如 this question 所示。那案子其实比你的要复杂。

我认为使用 JS 的最佳方法是首先将其均匀地拆分为列容器，正如 Damp 建议的最佳猜测。这应该对那些禁用 JS 的人有所帮助。然后我们 JS 测量细分的高度，如果最初的猜测不正确，则移动它们。假设您使用服务器端语言来生成页面，您应该能够平均拆分列。您甚至可以通过检查内容的长度（假设其文本）作为细分可能高度的启发式方法来对拆分做出很好的估计。

【讨论】：