以从上到下，从左到右的方式定位元素

Question

以从上到下，从左到右的方式定位元素

javascripthtmlcss

3

我有一个主容器<div>，其中包含4或5个子<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可以有不同的高度但是固定的宽度。

谢谢。

- Jaime Garcia

1

你必须支持IE6吗？（这可能很重要，因为有很多CSS技巧在IE6上不起作用，虽然我们都想忽略IE6，但在某些领域，特别是大型企业领域，它仍然是一个重要的浏览器。在其他领域，IE6的使用率则低得多。因此有这个问题。） - T.J. Crowder

我们只需要IE 7（严格DTD）及以上版本即可。 - Jaime Garcia

3个回答

1

在 DIV 中使用此 CSS：

display: inline-block

- Sjoerd

这将会做同样的事情（在排序方面）如同 float: left;。 - Matt Ball

是的，这并不符合我所需的工作方式。我已经修改了问题以展示我正在使用的标记类型。 - Jaime Garcia

1

有这个诱人的“删除”链接...;-) - T.J. Crowder

0

原生实现这个效果的唯一方法是使用CSS3列（正如Damp所提到的），但也有一些文章介绍了如何使用JavaScript实现类似的效果，可以参考this question。那个案例实际上比你的更复杂。

我认为使用JS实现最好的方式是首先按照Damp建议的方式将其均匀分割成列容器。这样做可以帮助那些禁用JS的用户。然后使用JS来测量子div的高度，并在初始猜测不准确时进行调整。假设你正在使用服务器端语言生成页面，你应该能够将列均匀分割。你甚至可以通过检查内容的长度（假设它是文本）作为推断子div可能高度的启发式方法来对分割进行良好的估计。

- Russell Leggett

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Damp · Accepted Answer

据我所知，目前没有办法实现这个功能。

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

我会将内容分成三个列容器来完成这个功能。

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