1

私は自分のプロジェクトのオンラインショッピングサイトを作成してfloat:leftいます。適切にリストするために使用した製品リストに、製品divのサイズが変動するという問題があります。1つのdivのサイズが大きくなると、リストのデザインが台無しになります。これが私のコードです：私を助けてください：

HTML：

<div class="container">
            <div class="unit"  style="height:140px">
            </div>
            <div class="unit">
            </div>
            <div class="unit">
            </div>
            <div class="unit">
            </div>
            <div class="unit">
            </div>
            <div class="unit">
            </div>
            <div class="unit">
            </div>
            <div class="unit">
            </div>
            <div class="unit">
            </div>
            <div class="unit">
            </div>
            <div class="unit">
            </div>
            <div class="unit">
            </div>          
        </div>

CSS：

.unit{float:left;width:170px;height:133px;border: 1px solid red;margin:5px;}

これはフィドルリンクです：http： //jsfiddle.net/iiison/VPESu/

前もって感謝します ：）

4

3 に答える 3

5

削除floatして追加display:inline-block

.unit{
    width:170px;
    height:133px;
    border: 1px solid red;
    margin:5px; 
    display:inline-block; 
    vertical-align:top
}

デモ

于 2013-03-25T11:49:52.717 に答える
4

max-heightプロパティ（および必要に応じてmax-width ）を使用します。

.unit{float:left;width:170px;height:133px;max-height:133px;border: 1px solid red;margin:5px;}

編集：固定の高さ/幅を設定したくない場合は、これを試すことができます：

http://masonry.desandro.com/

編集：等しい高さのDiv（最も高いdivまで）：

http://filamentgroup.com/examples/equalHeights/

http://filamentgroup.com/lab/setting_equal_heights_with_jquery/

于 2013-03-25T11:48:47.693 に答える
0

float：leftをdisplay：inline-blockに変更すると機能しますが、一部の高さが他の高さと大幅に異なる場合は、非常に見苦しくなります。

高さが数ピクセルしか変化しない場合は、その解決策を選択します。

それ以外の場合は、JavaScriptベースのソリューションをいくつか検討できます。

Equal Heightsプラグインは、すべてのdivが同じ高さになるようにします。

http://filamentgroup.com/lab/setting_equal_heights_with_jquery/

また

Masonryプラグインにより、DIVSはPinterestのグリッドレイアウトのように表示されます。

http://masonry.desandro.com/

于 2013-03-25T11:54:56.813 に答える