水平對齊div

Question

我正在為我的項目創建一個在線購物網站，在產品列表中，我使用float:left正確列出了它們，但問題是產品div的大小將是可變的，如果一個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/

提前致謝 ：）

Answer 1

刪除float並添加display:inline-block

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

演示

Answer 2

使用max-height屬性（如果需要，還可以使用max-width ）：

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

編輯：如果您不想設置固定高度/寬度，則可以嘗試以下操作：

http://masonry.desandro.com/

編輯：相等高度Divs（到最高div）：

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

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

Answer 3

將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/