1

http://oi49.tinypic.com/2qithg4.jpg (例は jpg img)

例でわかるように; ボックス（フローティング後）は、divの等しい行のための部屋を作るためにその下に空白を取得しますが、ギャップを埋めるためにすべてをフロートしたい..何か提案はありますか？

それが私がやりたいことです（例はjpg imgです）

http://oi47.tinypic.com/2nixr2x.jpg

前もって感謝します。

edit// アレックスにいくつかのコードを表示します:)

HTML 

<div id="content">
<div id="featured"></div>
<div class="box"></div>
<div class="box"></div>
<div style="width:310px; height:18px; margin:0 0 10px; padding:98px 0; text-align:center; float:left; display: block; background: #ffffcc;">Ad Space</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

CSS

#content { }
#featured { width:630px; float:right; height:214px; margin:0 10px 10px 0; }
.box { float:left; width:310px; margin:0 10px 10px 0; height:400px; }
4

1 に答える 1

0

同様の質問が以前に尋ねられていました: float:left div の垂直方向の配置ですが、適切な解決策は示されていませんでした。私が推測する限りでは、動的コンテンツに純粋な CSS を使用するのは難しいので、このタスクにはjQuery Masonryを使用することをお勧めします。

純粋な CSS アプローチについては、ここでCSS3 columns説明されているように使用して実行できると思います。

于 2012-04-29T18:53:29.653 に答える