css - 異なる高さの div を 2 つの列に時系列で積み重ねるにはどうすればよいですか?

Question

2 つの列があり、高さの異なる div を出現順に積み重ねたいと考えています。

div は動的に作成されます。

最初のストーリーを左に、2 番目のストーリーを右にフロートさせることでこれを実行しようとしましたが、それでもいくつかの異常があるようです。

このデモを見てください。すべて説明されているはずです。

http://dl.getdropbox.com/u/142343/divstack.html

Answer 1

これが目的の効果であるかどうかはわかりませんが、使用してみてください

.left {
  float:left;
  clear:both;
}
.right {
  float:left;
}

左と右のCSSとして。

Answer 2

Try to use "clear:left" for floated to left and "clear:right" for floated to right.

You cannot create two columns without empty space between with that HTML structure.

If you want two columns without empty space, then you need to generate different structure - place odd elements in one column and even in other.

Answer 3

それらを 2 つのセルを持つテーブルに入れます。(はい、はい、燃え尽きる!)

追加：明確にするために：私が意味したのはこれでした：

<table>
    <tr>
        <td>
            <div>First DIV</div>
            <div>Third DIV</div>
            <div>Fifth DIV</div>
        </td>
        <td>
            <div>Second DIV</div>
            <div>Fourth DIV</div>
            <div>Sixth DIV</div>
        </td>
    </tr>
</table>

幅とパディングの設定をいくつか入れると、2 つのきちんとした小さなスタックができあがります。

さて、あなたの例を見ると、私はまだ何か他のことに気づいたと思います. <div>両方のスタックができるだけ同じサイズになるように、 を自動的に配置する必要があります。それは不可能だと思います。

それらをレンダリングしてから、JS で高さを確認し、再配置しようとするかもしれませんが、これにより、ブラウザーで厄介なちらつきが発生します。

追加 2:リンクを確認してください:http://valts.21.lv/problem/DivStack.html