以顶部 - >左下 - >右侧的方式排列元素

我有一个主容器<div>，它包含4个或5个其他子<div> s。容器具有固定的高度和固定的宽度。定位子div的最好方法是什么，以便按照top-> down，left-> right的方式进行排列？以顶部 - >左下 - >右侧的方式排列元素

我试过浮动子divs，但只是给我一个左 - >右，然后顶部 - >降序。

基本上我想这

[ 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可以有不同高度，但固定宽度。

谢谢

来源

2011-02-08 Jaime Garcia

您是否需要支持IE6？（可能很重要，有很多CSS技巧不适用于IE6，虽然我们都可能想忽略IE6，但在某些行业 - 特别是大型企业行业 - 它仍然是一个重要的浏览器。，更不用说了。因此，这个问题。） – 2011-02-08 15:28:24

为此，我们只需要IE 7（严格的dtd）和以上。 – 2011-02-08 15:30:13

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

有一些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>

来源

2011-02-08 15:33:49 Damp

使用此CSS上的DIV：

display: inline-block

来源

2011-02-08 15:21:17 Sjoerd

这将做与'float：left;' – 2011-02-08 15:23:24

要做到这一点本身是唯一的方式的方式支持使用CSS3列（如Damp提到的），但是有一些关于如何通过this question获得类似JavaScript效果的文章。这种情况实际上比你的情况更复杂。

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

来源

2011-02-08 15:51:23

以顶部 - >左下 - >右侧的方式排列元素

回答

相关问题