Question

我有一个主容器<div>，其中包含4个或5个其他子<div>个。容器具有固定的高度和固定的宽度。定位子div的最佳方法是什么，以便它们以顶部＆gt;向下然后向左和向右的方式排列？

我试过浮动子div但是只给了我一个left-＆gt; right然后top-＆gt; down order。

基本上我想要这个

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

Answer 2

在DIV上使用此CSS：

display: inline-block

Answer 3

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

我认为使用JS做到这一点的最佳方法是首先将其均匀分配到列容器中，如Damp建议的最佳猜测。这应该有助于那些禁用JS的人。然后我们JS测量细分的高度，并在初始猜测结束时移动它们。假设您使用服务器端语言生成页面，您应该能够均匀地拆分列。您甚至可以通过检查内容的长度（假设其文本）作为细分可能高度的启发式来对分割进行很好的估计。

以向上 - 向下>向左 - 向右的方式定位元素

3 个答案: