CSS dived

Question

divsがすべて左に浮いています。添付されたjsfiddleが表示されている場合、私は何をしようとしているのでしょうか、フィドルで黄色のボックスがあります。緑色のボックスだけが、これが可能なのかどうかわからないのですか？

ですか？もしそうなら、私はこれをどのようにしてもよいでしょうか？前もって感謝します！

http://jsfiddle.net/K5zjc/

Answer 1

はthis jsFiddleのようなものを試してみてください。技術的には、左の代わりに.boxの項目を右に浮かべてください。次に、コンテンツに応じて自己充填欄が表示されます。だから、あなたのCSSに追加：あなたは、これらの特定のブロックが複数ある場合は

.box:nth-child(odd) {clear: left} 
.box:nth-child(even) {float: right; clear: right} 

UPDATE

をどうやらこのソリューションは素晴らしい動作しません。だから、おそらく、jQuery Masonryは良い結果を得るための唯一の方法です。

Answer 2

あなたは列として機能float: leftで2つのdiv Sを追加する必要があります。

を参照してください：http://jsfiddle.net/K5zjc/5/

<div style="width:200px;"> 
    <div class="boxContainer"> 
     <div class="box green"> 
      <ul><li>Item</li></ul> 
     </div> 
     <div class="box yellow"> 
      <ul><li>Item</li><li>Item</li></ul> 
     </div> 
    </div> 
    <div class="boxContainer"> 
     <div class="box red"> 
      <ul><li>Item</li><li>Item</li><li>Item</li><li>Item</li></ul> 
     </div> 
     <div class="box cyan"> 
      <ul><li>Item</li><li>Item</li></ul> 
     </div> 
    </div> 
</div>