javascript - グーグルウェブストアのようなCSSボックスレイアウト

Question

私はグーグルウェブストアのようなデザインのウェブサイトを持っています。これはどのように見えるかです：

下部の領域に気付く場合は、2つのボックスが上のスペースを埋めていません。

ボックスは折り返されul、アイテムはにありliます。リストアイテムは左にフロートしulていて、クリアです。

jsfiddleのリンクは次のとおりですhttp://jsfiddle.net/wTCKr/

これを修正するCSSまたはJSを提案してください。ありがとうございました。

Answer 1

右側に大きなボックスが必要な場合は、左側の小さなボックスが正しく入力されるように、それらを右にフロートさせる必要があります。

<li class="items big" style="float:right">

この更新されたJSフィドルフォークを参照してください。

大きな箱を真ん中に置いても問題は解決しません。その場合もサポートする必要がある場合は、絶対位置といくつかのjQueryまたはJSを使用してレイアウトを行うことをお勧めします。

更新：私は簡単な挑戦を楽しんでいるので、あなたのために絶対的なポジショニングを行うためにいくつかのJSを書きました。私はjQueryを使用しましたが、サイトでjQueryを使用しない場合は、ストレートJSに変換できます。このコードは、有効な順序で正しい数のボックスがあることを前提としています（たとえば、他のすべての行が小さなボックスで埋められている場合、最後の行に大きなボックスを配置することはできません）。

Answer 2

あなたはうまくいくul { top: -200px or margin-top: -200px;}だろうをすることができます。