jquery - どうすればこれを達成できますか? 通常の html と css を使用することを好む

Question

jqueryを使わずにこれを達成する方法はありますか?

画像の幅は、小、中、大とさまざまです。製品にはサイズのプロパティがあります。

左にフロートだけを使用することを考えましたが、全体像が左下の2つを強制的に次の行に移動するため、うまくいきません。

jquery を使用する必要がある場合、どのプラグインが最適ですか?

編集: リストの順序はさまざまです。つまり、写真のサイズは常に同じ位置にあるわけではありません。左にフロート、右にフロートは機能しません

Answer 1

あなたはjQuery Masonryを探しているかもしれません:

Masonry は、jQuery の動的グリッド レイアウト プラグインです。CSS フロートの裏側と考えてください。フローティングは要素を水平に配置してから垂直に配置しますが、Masonry は要素を垂直に配置し、各要素をグリッド内の次のオープン スポットに配置します。その結果、石工が壁に石をはめ込むように、さまざまな高さの要素間の垂直方向の隙間が最小限に抑えられます。

Answer 2

下4台（小型車）が入った箱を作り、残ったフロート

Answer 3

このdiv構造を使用してください。したがって、赤は全幅で、その他は 50% です。

Answer 4

次の構造を試してください

    <div>
       <img src="smallimg1/>
       <img src="smallimg2/> 
       <img src="smallimg3/>
       <img src="smallimg4/> 

        </div>

        <div>

   <div id="div1"> 
       <img src="smallimg1/>
       <img src="smallimg2/> 
       <img src="smallimg3/>
       <img src="smallimg4/> 
    </div>
    <div id="div2"> 
       <img src="bigimg1/>          
    </div>

</div> 

CSSコード

img
{
float:left;
}
#div1
{
width:50%;
}
#div2
{
width:50%;
}