Question

我在容器div中有一系列动态创建的不同高度的div。

<div id="container">
  <div id='d1'>Varying text...</div>
  <div id='d2'>Varying text...</div>
  <div id='d3'>Varying text...</div>
  <div id='d4'>Varying text...</div>
  <div id='d5'>Varying text...</div>
  <div id='d6'>Varying text...</div>
  <div id='d7'>Varying text...</div>
</div>

当我“浮动：左”时，div按预期换行，在较短的div和下一行div之间留下空格。

我如何让div有效地“漂浮起来”，包裹在真实地而不是在地平线上。仅使用css。

理想情况下，第2项将在第1项下，但任何改进都会有所帮助。

所以它最终看起来像这样

enter image description here

Answer 1

尝试使用jQuery Masonry。这可能是一个很好的解决方案。

http://masonry.desandro.com/

或尝试Isotope，它具有更好的性能

http://isotope.metafizzy.co/

Answer 2

如果希望div在所有浏览器代理中垂直堆叠，则需要将每个“section”包装在包含元素中。这是我的意思的一个例子。

css

// let's reset our elements
.site-container,
.element-container,
.my-element {
    margin: 0;
    padding: 0;
}
.site-container {
    display: block;
    width: 960px;
    margin: 0 auto; /* centers your site container on the page */
    clear: both; /* basic float clearing */
}
.element-container {
    display: inline-block;
    float: left;
    width: 300px; /* we'll have 3 sections width 10px spacing */
    margin-right: 10px;
}
.element-container.last {
    margin-right: 0;
}
.my-element {
    width: 280px; /* 300 - 20px [total padding] = 280px */
    margin-bottom: 10px; /* add a bottom margin */
    padding: 10px; /* makes our element 320px wide */
}

// make background-color classes
.bg-red {
    background-color: #ff0000;
}
.bg-blue {
    background-color: #3b8acd;
}

标记

<html>
<head>
<title>Vertical boxes!</title>
</head>
<body>
    <div class="site-container">

        <div class="element-container">
            <div class="my-element bg-red">
                1
            </div>

            <div class="my-element bg-blue">
                2
            </div>
        </div><!-- /element-container -->

        <div class="element-container">
            <div class="my-element bg-blue">
                3
            </div>

            <div class="my-element bg-red">
                4
            </div>
        </div><!-- /element-container -->

        <div class="element-container last">
            <div class="my-element bg-red">
                5
            </div>

            <div class="my-element bg-blue">
                6
            </div>
        </div><!-- /element-container -->

    </div><!-- /site-container -->    
</body>
</html>

就你所拥有的第七个div而言，我建议让它跨越整个网站容器。这在美学上很令人愉悦：）

Answer 3

你应该尝试将div的每一列放入它自己的容器中，并将它们向左浮动。例如：

<div id='container'>
    <div id='col1'>
        <div id='d1'>asdf</div>
        <div id='d2'>asdf</div>
    </div>
    <div id='col2'>
        <div id='d3'>asdf</div>
        <div id='d4'>asdf</div>
    </div>
</div>

等等。

每列相互向左浮动，列中的每个项目都垂直流动......这是一个例子：http://jsfiddle.net/V6z8F/

Answer 4

最近我为我的项目做了这个。

为父类添加CSS：

-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;

实施例

<div class="parent">
  <div class="child"></div> 
</div>

Answer 5

Masonry的两种替代方案非常有效：

Salvattore （CSS驱动）：http://salvattore.com/

同位素：http://isotope.metafizzy.co/index.html

如何让不同高度的html div浮起来

5 个答案:

实施例