水平对齐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/