0

最初の列のすぐ下にある4番目の列を上に移動する必要があります。cssでこれを行う可能性はありますか？

<body>
    <div class="fleft">1 Lorem ipsum dolor sit amet</div>
    <div class="fleft">2 Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
    <div class="fleft">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="fleft">4 Lorem ipsum dolor sit amet, consectetur.</div>
    <div class="fleft">5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</body>

CSS

body  { width:600px;}
.fleft{ float:left; width:200px;}
​

フィドルを参照してください

http://jsfiddle.net/9xbGC/

4

6 に答える 6

1

元の構造を考えると、ありません（唯一のCSSを使用し、ダーティハックなしで）。4 番目の列は、3 番目の列の高さに従わなければなりません。

おそらく、この jQuery プラグインはあなたを助けることができます:

http://masonry.desandro.com/

于 2012-07-13T12:01:05.917 に答える
0

いいえ、最初の div の特定の高さに依存できる場合のみ。

#div4{
    position: absolute;
    margin-top: 20px;
}
于 2012-07-13T12:05:25.173 に答える
0

純粋な CSS でこれを行う唯一の方法は、3 つの列を作成し、それらの間でコンテンツを分割することです。

于 2012-07-13T12:02:52.720 に答える
0

これは絶対位置を使用し、各に上と左を設定することで実行できますが、それぞれの高さが分からない場合は JavaScript を使用してこれを行う必要があります。

または、jquery プラグインを使用できます: http://www.wookmark.com/jquery-plugin

于 2012-07-13T12:03:33.673 に答える
0

float は要素の順序ではなく要素の流れのみを調整するため、float ではありません。絶対/相対ポジショニング、javascript を使用できます。

于 2012-07-13T12:09:59.633 に答える
0

4 番目の div が 1 番目と 3 番目の div の間に収まるように div の幅を指定します。次に、4 番目の列を左にフロートさせると、右に配置されます。

編集: Twitter Bootstrap に付属している素晴らしいグリッド システムを使用することもできます。これは非常に便利で、深刻なレイアウトの問題を解決することができます。 http://twitter.github.com/bootstrap/

于 2012-07-13T12:11:03.823 に答える