列表项目未垂直对齐

I'm trying to make a list of items with variable heights. When I try to make a neat list with items aligned in horizontal rows it all goes well when the list items all have the same height. When 1 or more items have a greater height it goes wrong. I created a JSFiddle to show the problem very clearly. Can anyone help me out?

我正在尝试列出具有可变高度的项目列表。当我尝试使用水平行中对齐的项目创建一个整齐的列表时,当列表项具有相同的高度时,一切顺利。当一个或多个物品的高度更高时,它会出错。我创建了一个JSFiddle来非常清楚地显示问题。谁能帮我吗?

http://jsfiddle.net/NNLDn/

my html:

<div>
    <ol>
        <li></li>
        <li></li>
        <li style="height: 140px;"></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</div>

my css:

div {
    width: 730px;
}

ol {
    width 730px;
    margin-left: -40px;
}

ol li {
    display: block;
    width: 167px;
    height: 120px;
    margin: 0 0 15px 15px;

    background:red;
    float: left;
}

3 个解决方案

#1

You should consider using display:inline-block instead of float:left, then you can also play with the vertical alignment of the elements with vertical-align.

你应该考虑使用display:inline-block而不是float:left,然后你也可以使用vertical-align来演奏元素的垂直对齐方式。

#2

The only css solution I know, if you know the number of li items per row, is to enclose each row in a div, and then float these divs. That way each div with automatically adjust to the height of the tallest li, and none of the floating lis will get "hung-up"

我知道唯一的css解决方案,如果你知道每行的li项数,就是将每行包含在div中,然后浮动这些div。这样每个div都会自动调整到最高li的高度,并且浮动lis都不会“挂起”

div div { float: left; clear: both; }

div div {float:left;明确:两者; }

http://jsfiddle.net/NNLDn/1/

#3

I can't double check easily now, as I am in my phone, but I think you need to use display:inline-block and not use float

我现在不能轻易地检查,因为我在手机中,但我认为你需要使用display:inline-block而不是使用float

#1