javascript - 以 top->down left->right 方式定位元素

Question

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

我试过 float 子 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 可以具有可变高度但固定宽度。

谢谢，

Answer 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>