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
}

<强> DEMO

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/

修改：等高分（最高分）：

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

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

Answer 3

更改浮动：左侧显示：内联块将起作用，但如果某些高度与其他高度明显不同，则会显得非常难看。

如果它们的高度只有几个像素，那么我会选择那个解决方案。

否则你可以考虑一些基于javascript的解决方案。

Equal Heights插件将使所有div具有相同的高度：

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

OR

Masonry插件将使DIVS显示为Pinterest上的网格布局：

http://masonry.desandro.com/

水平对齐div

3 个答案: