html - 具有动态内容的 CSS 水平分布

Question

我在固定宽度的父 div 中有一些动态创建的 div，我想让它们水平分布。由于它们是动态创建的，所以我不知道容器中有多少，除非我用 JS 计算它们，我试图避免这种情况。

我最初是在 this 上尝试“使用行内 block 和对齐文本”技术页;然而，当 child 数量多于容纳的数量时(即当有两行时)，它似乎表现得有点不稳定，(参见第二行 here)所以我认为这行不通。

*编辑: 实际上我现在才意识到它实际上并不是不稳定的，它正确地间隔了第二行，但我想要的是(在这个无论如何都是特殊情况......)是为了让第二行的三个红色框占据第一行前三个位置的位置，最后留下两个位置，而不是将它们间隔开)....所以我认为总的来说，这种技术不太可能对我有用。

是否有其他方法可以实现上述目标的任何建议。我宁愿不必使用 JS，但如果没有其他方法，那么我愿意接受建议。

Answer 1

这不是失败，这是 float 的 native 行为。

如果您希望每行容纳更多内容，请将容器变大或将盒子变窄。

如果您根本不想让它们换行，请将 overflow:auto 添加到您容器的 CSS 中，您将获得一个滚动条。