水平对齐div

时间:2013-03-25 11:46:19

标签: html css

我正在为我的项目创建一个在线购物网站,在产品列表中我使用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/

提前感谢:)

3 个答案:

答案 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://masonry.desandro.com/

修改:等高分(最高分):

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上的网格布局:

http://masonry.desandro.com/