我正在为我的项目创建一个在线购物网站,在产品列表中我使用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/
提前感谢:)
答案 0 :(得分:5)
删除float
并添加display:inline-block
.unit{
width:170px;
height:133px;
border: 1px solid red;
margin:5px;
display:inline-block;
vertical-align:top
}
<强> DEMO 强>
答案 1 :(得分:4)
使用 max-height 属性(如果需要,还可以 max-width ):
.unit{float:left;width:170px;height:133px;max-height:133px;border: 1px solid red;margin:5px;}
编辑:如果您不想设置固定高度/宽度,可以试试这个:
修改:等高分(最高分):
http://filamentgroup.com/examples/equalHeights/
http://filamentgroup.com/lab/setting_equal_heights_with_jquery/
答案 2 :(得分:0)
更改浮动:左侧显示:内联块将起作用,但如果某些高度与其他高度明显不同,则会显得非常难看。
如果它们的高度只有几个像素,那么我会选择那个解决方案。
否则你可以考虑一些基于javascript的解决方案。
Equal Heights插件将使所有div具有相同的高度:
http://filamentgroup.com/lab/setting_equal_heights_with_jquery/
OR
Masonry插件将使DIVS显示为Pinterest上的网格布局: