Question

我在列表中遇到问题，该列表包含基于内容的交替高度的项目。这会导致行断开，如下所示：http://jsfiddle.net/PYRGb/尝试重新调整显示视图的大小以查看效果。

我理想的是，列表项继续到下一行，空间足以在不触及上一行边缘的情况下形成一行。这可能吗？

我知道我已经提到了'行'而且一张表可能是一个解决方案，但我我正在使用清单来保持显示液的流动性和适应范围设备。
我找到的唯一解决方案是设置一个我确定的min-height 内容不会像这样溢出：http://jsfiddle.net/PYRGb/1/但是我实在无法预测列表项中的内容量和希望列表项尽可能适应高度。

编辑：只是一个注释，如果你看到显示器的大小调整为3列，你可以看到我需要的效果，但它在其他情况下不起作用。（不确定在所有浏览器中是否相同，我使用的是Chrome 26）

由于

Answer 1

移除浮动并使li显示为带有垂直对齐顶部的内联块。

http://jsfiddle.net/stevendwood/PYRGb/2/

ul li{
    width: 100px;
    padding: 10px;
    margin: 0 0 20px 20px;
    border: 1px solid red;
    background: #eaeaea;
    display: inline-block;
    vertical-align: top;
}

您可以将垂直对齐设置为中间或任何您喜欢的对齐方式。

列出具有交替高度混乱行的项目

1 个答案: