1

この jsFiddle を参照してください: http://jsfiddle.net/jRGyS/

ブロックから 2 つの列を作成したいと考えています。偶数 (ライム) のブロックは右に、奇数 (青) のブロックは左に浮いています。ただし、ブロックの高さが異なると、レイアウトが少し乱雑になります。最後の青いブロックが別の青いブロックに対して浮かんでいることがわかりますが、この青いブロックは左にとどまるか、代わりに右に浮く必要があります。

問題は、これらのブロックが動的にロードされ、常に高さが異なることです。そのため、いくつあるか、それぞれの高さ、およびそれらが表示される順序を予測することはできません (DOM がロードされた後の Javascript を除く)。

理想的なケースは Javascript なしですが、それが不可能な場合は JS を使用できます。

4

1 に答える 1

2

このJSFiddleのように clear:left と clear:right を使用します

div.block {
   background: blue;
   width: 100px;
   height: 100px;
   margin-bottom: 10px; 
}
div.block:nth-child(odd) {
   float: left;            
   clear: left;
}
div.block:nth-child(even) {
   background: lime;   
   float: right;            
   clear: right;
}
于 2012-07-11T18:34:41.517 に答える