1

これは私を夢中にさせています。

定義済みのヘッダーとフッターのみを持つページを作成しています。それらの間のコンテンツは、ラッパーを埋めるために適切に配置する必要がある一連のボックス (動的) になります。

以下に例を示します: http://jsfiddle.net/rdMKQ/1/

HTML:

<div id="wrapper" >
    <div class="box" style="width:60px;height:60px;background-color:blue"> 1 </div>
    <div class="box" style="width:40px;height:30px;background-color:red"> 2 </div>
    <div class="box" style="width:80px;height:60px;background-color:yellow"> 3 </div>
    <div class="box" style="width:40px;height:30px;background-color:green"> 4 </div>
</div>

非インライン CSS:

#wrapper{width:180px;}
.box{float:left}

私が使用したすべてのボックスfloat:leftとサイズは、例として「ランダム」です

緑のボックス (4) を赤のボックス (2) のすぐ下に配置してギャップを埋めるにはどうすればよいですか?

ソリューションの要件:

  • 1 つのボックスに特定のスタイルを定義することはできません。スタイルはすべてのボックスに共通でなければなりません
  • ボックスは重複できません

PD: 私はすでに jQuery Masonry Plugin を試して、彼が JS のギャップを埋める作業を行えるようにしましたが、運が悪く、私が必要とすることを行うオプションはありません。

ご協力いただきありがとうございます。

4

2 に答える 2

1

これは可能ですが、既存のHTMLフローでは実行できません。

次に例を示します。

<div id="wrapper" >    
    <div class="box" style="width:60px;height:60px;background-color:blue"> 1 </div>
    <div class="box" style="width:40px;height:30px;background-color:red"> 2 </div>
    <div class="box" style="width:40px;height:30px;background-color:green"> 4 </div>
</div>
<div class="box" style="width:80px;height:60px;background-color:yellow;"> 3 </div>

と

#wrapper{width:100px;height:60px;float:left;}
.box{float:left}
于 2011-08-05T16:16:56.673 に答える
0

このようなものをお探し ですか？唯一の問題は、緑色のボックスが他のボックスと重なっているということです。

<div id="wrapper" >
    <div class="box" style="width:60px;height:60px;background-color:blue"> 1 </div>
    <div class="box" style="width:40px;height:30px;background-color:red"> 2 </div>
    <div class="box" style="width:80px;height:60px;background-color:yellow"> 3 </div>
    <div class="box green" style="height:30px;background-color:green"> 4 </div>    
</div>

と

#wrapper{width:180px;}
.box{float:left; z-index:5;}
.green{position:relative; clear:both; width:100%; margin-top:-30px; z-index:3;}
于 2011-08-05T16:23:50.967 に答える