1

我正在为我的项目创建一个在线购物网站，在我用来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/

提前致谢 ：）

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 回答