在不同高度的情况下，浮动的图像在彼此之下。

Question

divs的宽度是一样的。我试着清除所有图片，但没有得到想要的结果。

<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

如果图片将有一个固定的宽度，一个选择是以列的形式布局内容，如。

栏的形式，比如：

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

超文本标记语言

<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使用类似masonry的东西来实现。http:/masonry.desandro.com。