CSSを使用して項目を浮動させて積み重ねることは可能ですか？

Question

私はこれがJavaScriptと単なるCSSを使用せずに可能であるかどうかを見たいと思っていました。私はdivsの項目のリストを持っています。他の部分の高さの1/2の項目があり、それらを積み重ねたいのです。 2ビットの別のコンテナ要素を追加することなく、構造体を変更することができないので、divのリストに過ぎません。また、最終的な結果は次のようになります（つまり、リストは1/2の高さと、通常の高さのランダムなセットでこれらの20可能性）論文の倍数があることができます：

HTML構造次のとおりです。

.item { 
    border: 1px solid red; 
    float: right; 
    margin: 5px; 
} 
.issue { 
    width: 100px; 
    height: 200px; 
} 
.bit { 
    width: 100px; 
    height: 90px; 
} 

と私は現在入手：：

<div id="issues"> 
    <div class="item issue">issue data 1</div>   
    <div class="item issue">issue data 2</div>    
    <div class="item bit">bit data 1</div> 
    <div class="item bit">bit data 2</div> 
    <div class="item issue">issue data 3</div> 
    (... can have repeating bits or issues here ...)   
</div> 

動作しません。私は現在使用しているCSSは、ある

ここで

バージョンです：http://jsfiddle.net/kSgtY/

Answer 1

はあなたがenotherのDIVを作成する必要があります（問題データ5）あなたは、これらの2つのdivを置くている（ビットデータ1とビットデータ2）

Answer 2

負のマージンを使って2番目のビットをシフトすることができますが、そのheightとソースの順序が常に同じであることを確認する必要があります。

jSFiddle link

Answer 3

通常、私はこの方法を使用することがなかったが、あなた以来：javascriptの

が固定高さを有して

• は、マークアップ
• を変更することはできませんを使用することはできませんし、幅 ...

Y絶対位置を使用することができます。 +隣接セレクタと:first-childを使用して、我々は、個々の要素を標的とすることができる：

Demo hereを。

私は追加CSS：

.issues { 
    position:relative; 
} 
.issue, .bit { 
    position:absolute; 
} 
.issue:first-child { 
    left:330px; 
} 
.issue:first-child + .issue { 
    left:220px; 
} 
.bit { 
    left:110px; 
    top:110px; 
} 
.issue:first-child + .issue + .bit { 
    top:0; 
} 

Answer 4

あなたの心を変更し、javascriptのを使用したい場合は、私は非常にjQuery Masonryをお勧めします。