異なる高さでdivを浮かせる方法は？私が達成したい何

Question

：

私は現在、何を得る：（2番目のボックスは、全体のレイアウトを台無しに余分なリストアイテムを持っている）

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> 

1つの解決策は、新しいdivに5つの項目をグループ化してclear:leftを適用することですが、PHPコードがどのように動作するのかではできません。

Answer 1

私はこれをたくさん行い、常にこの参照に戻ってくる：

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

私は、これはあなたが後にしている何を達成するのを助けると思います。

Answer 2

divのすべてのインラインブロックを表示するだけではありませんか？

Answer 3

フィドル 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 4

本当にわからないため、どのように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 5

各コンテナの高さに苦しんでいる可能性があります。内側にあるものに設定されています。後で各divコンテナのDOMを操作するために、jQueryのような要素で要素をつかむことができます。高さが重要で、ボックス内に十分なコンテンツがなくても展開できます。

水平スペーシングでは、これらの要素のそれぞれが同じパディングでCSSクラスを共有できますか？

ブロック5は、各コンテナに明示的な幅があり、親コンテナの幅が明示的である場合に達成できます。