1

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

我最理想的是让列表项继续到下一行，有足够的空间来制作一行而不会碰到上一行的边缘。这可能吗？

  • 我知道我已经提到了“行”并且表格可能是一种解决方案，但我使用列表来保持显示流畅并适应各种设备。

  • 我发现的唯一解决方案是设置一个min-height我确定内容不会像这样溢出：http: //jsfiddle.net/PYRGb/1/但我真的无法预测列表项中的内容量并且想要列表如果可能，项目以适应高度。

编辑：请注意，如果您看到将显示调整为 3 列，您可以看到我需要的效果，但在其他情况下不起作用。（不确定这是否在所有浏览器中都相同，我使用的是 Chrome 26）

谢谢

4

1 回答 1

3

删除浮动并使 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;
}

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

于 2013-05-14T17:05:52.470 回答