html - 水平对齐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;}

这是 fiddle 链接: 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
} 

DEMO