Question

如果我们有不同的固定高度，我们可以从div垂直和水平制作相等的间距吗？

请看小提琴 http://jsfiddle.net/awaises/K8Qwq/

HTML

 <div style="height:50px;"></div>
 <div style="height:60px;"></div>
 <div style="height:20px;"></div>
 <div style="height:50px;"></div>
 <div style="height:100px;"></div>
 <div style="height:20px;"></div>
 <div style="height:50px;"></div>
 <div style="height:75px;"></div>
 <div style="height:30px;"></div>
 <div style="height:60px;"></div>
 <div style="height:20px;"></div>
 <div style="height:50px;"></div>

CSS

 div{float:left; width:30%; background:red; margin:1%; }

Answer 1

不是一个真正的答案，而是替代你想要实现的目标。如果您正在寻找“pinterest-style”网格系统，请检查jquery masonry。动画，可调节排水沟（每个项目之间的距离），自动排序和许多其他功能。看看吧。

Answer 2

你可以将它切成三列，宽度固定，让它们漂浮。然后，列中的每个div都将粘在彼此之下

Answer 3

纯HTML / CSS解决方案。如果您只需要3列，这只适用。但您可以确保更改代码以使其在任何列中都有效。

Demo

<强> CSS

.col > div {
    width:100%;
    background:red;
    margin-bottom:10px;
}
.col  {
    width:30%;
    float:left;
    margin:1%;
}

Answer 4

HTML更改

<div style="height:50px;"></div>
<div style="height:60px;"></div>
<div style="height:20px;"></div>
<div class="clear"></div>
<div style="height:50px;"></div>
<div style="height:100px;"></div>
<div style="height:20px;"></div>
<div class="clear"></div>
<div style="height:50px;"></div>
<div style="height:75px;"></div>
<div style="height:30px;"></div>
<div class="clear"></div>
<div style="height:60px;"></div>
<div style="height:20px;"></div>
<div style="height:50px;"></div>

STYLE Changes

*{ margin:0; padding:0;}
div{float:left; width:30%; background:red; margin:1%; }
.clear{clear:both; width:100%;}

Answer 5

如果你不想使用库，你可以更好地将div组织成浮动的列：

http://jsfiddle.net/3DRwE/

<div class=column>
    <div style="height:50px;"></div>
    <div style="height:60px;"></div>
    <div style="height:20px;"></div>
    <div style="height:50px;"></div>
</div>
<div class=column>
    <div style="height:100px;"></div>
    <div style="height:20px;"></div>
    <div style="height:50px;"></div>
</div>
<div class=column>
    <div style="height:30px;"></div>
    <div style="height:60px;"></div>
    <div style="height:20px;"></div>
    <div style="height:50px;"></div>
</div>

float divs等间距，高度不同

5 个答案:

Demo