在具有不同高度的同时将图像浮动在彼此之下

Question

div的宽度相同。我试图清除所有图像，没有想要的结果。

<div id="results">
    <div id="7" class="foodDiv">
    <div id="8" class="foodDiv">
    <!--6 divs more-->
</div>
<div class="clear"> </div>

CSS

.foodDiv{
    padding:0 4% 0 0;
    max-width:20%;
    background-color:#CCC;
    float:left;
}

Answer 1

如果图像具有固定宽度，则可以选择以列的形式布置内容，例如：

CSS

.column{
    width: 20%;
    display: inline-block;
}

HTML

<div class=column>
  <div id="1" class="food"></div>
  <div id="3" class="food"></div>
  <div id="5" class="food"></div>
</div>
<div class=column>
  <div id="2" class="food"></div>
  <div id="4" class="food"></div>
  <div id="6" class="food"></div>
</div>

然后它们将被放在另一个之上，并且列并排排列。

如果列不是一个选项，那么唯一的方法是使用javascript使用类似砌体的东西：http://masonry.desandro.com/