如何浮动不同高度的div？

Question

我想要实现的目标：

我目前得到的内容:(第二个框中有一个额外的列表项，会影响整个布局）

HTML：

<div id="categories">
    <div class="cat">   cat1    </div>
    <div class="cat">   cat2    </div>
    <div class="cat">   cat3    </div>
    <div class="cat"> cat4 </div>
    <div class="cat">   cat5    </div>
    <div class="cat">   cat6    </div>
    <div class="cat">   cat7    </div>
    <div class="cat">   cat8    </div>
    <div class="cat"> cat9 </div>
    <div class="cat">   cat10   </div>
</div>

一个解决方案是将新项目中的五个项目分组并应用clear:left，但由于php代码的工作原理，我无法做到这一点。

Answer 1

我做了很多，并不断回到这个参考：

http://css-tricks.com/snippets/css/cross-browser-inline-block/

我认为这有助于您实现目标。

Answer 2

你不只是显示所有div的内联块吗？

Answer 3

由于php代码的工作原理，不确定为什么你不能做清楚的事。

<?php
$i = 0;
foreach ( $cats as $cat ) { 
  echo '<div class="cat"> cat '. $i .' </div>';
  if ( $i%5 == 0 ) {
    echo '<div style="clear: left;"></div>';
  }
  $i++
}
?>

否则，非php解决方案将是isotope或masonry。

Answer 4

<强>拨弄 http://jsfiddle.net/c4urself/gCEDV/

<强> HTML

<div id="categories">
    <div class="cat cat1 square">   cat1    </div>
    <div class="cat cat2 square">   cat2    </div>
    <div class="cat cat3 tall">   cat3    </div>
    <div class="cat cat4 square"> cat4 </div>
    <div class="cat cat5 long">   cat5    </div>
    <div class="cat cat6 tall">   cat6    </div>
    <div class="cat cat7 square">   cat7    </div>
</div>

<强> CSS

body {
    background-color: #ccc;
}
div.cat {
    background-color: #fff;
    float: left;
    margin-left: 5px;
    border: 1px solid green;
    margin-bottom: 5px;
}
#categories {
    width: 230px;
}
.square {
    width: 50px;
    height: 50px;
}
.long {
    width: 100px;
    height: 50px;
}
.tall {
    height: 100px;
    width: 50px;
}

Answer 5

您可能会对每个容器的高度感到困惑，因为它将被设置为其中的任何内容。如果高度很重要，并且框内没有足够的内容来拉伸它们，你可以使用像jQuery这样的元素来抓取每个div容器的DOM。

就水平间距而言，这些元素中的每一个都可以共享具有相同填充的CSS类吗？

如果每个容器都有明确的宽度且父容器具有明确的宽度，则可以实现块5。