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

我在列表中遇到了问题，列表中的项目根据内容的不同而具有不同的高度。这会导致行断开，如图所示：尝试重新调整显示视图的大小以查看效果

理想情况下，我希望列表项能够继续到下一行，并且有足够的空间来生成一行，而不会碰到上一行的边缘。这可能吗

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

• 我找到的唯一解决办法是设置一个我确定的

  min height

  内容不会像这样溢出：但我 确实无法预测列表项和中的内容量 如果可能，希望列表项调整高度

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

---

谢谢

卸下浮标，使li显示为带有垂直对齐顶部的内联块

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

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