html - 如何让元素再次一直向左浮动？

Question

我认为这个问题已被问过一百万次，但对问题的定义不同。它可能要么很容易修复，要么是网页设计师的长期愿望，但仍未得到答复。 注意:我确实搜索了 css float on stack，但虽然有些看起来像我的问题，但到目前为止我还没有找到类似的问题。

看到附件就会明白我的意思了。我希望它们以 3 排整齐地堆叠在一起，每个高度 <li>元素不同。换句话说:最高的 <li>一行中的元素是领先的，下一行的元素应该包裹在这一行之下。现在，新行中的元素会在开头撞到较长列表元素的内容，从而阻止新行的第一项完全向左浮动。

请注意，我不想用 php 或 js 解决这个问题，我认为必须有一个纯 css 解决方案...因为使用 php，我当然可以添加一个像“new-row”这样的类它并应用 clear: both到它，它会包裹。如果我想在 CSS 中做同样的事情，那么我不能不使用支持不佳的 :nth-of-type东西。此外，内容 block 的宽度是可变的，所以有时一行有 3 个，有时可能只有 2 个或最多 6 个。

谁能帮忙？

Answer 1

LI 使用“display:inline-block”，而不是“float:left”