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

Question

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

我最初是在此页面上尝试“使用内联块和对齐文本”技术；然而，当有更多的孩子超过不适合的时候（即当有两行时），它的行为似乎有点不稳定，（见这里的第二行）所以我认为这不会奏效。

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

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

score 0 · Accepted Answer

它没有失败，这是floats的本机行为。

如果您希望每行更适合，请将容器更大或框更窄。

如果您根本不希望它们包装，请添加overflow:auto到容器的 CSS 中，您将获得一个滚动条。

score 0 · Accepted Answer

您需要删除容器的宽度并添加display: inline-block;以允许 dic 容器的宽度与内部内容的宽度相同。还要添加overflow: auto;以使 div 调整到其中生成的 div 的数量

#container {
  display: inline-block;
  background:olive;
  overflow: auto;
  height: 180px;
}

score 0 · Accepted Answer

也许使用相对宽度而不是内部 div 的固定宽度....

#testcontainer div {
 width: 19%;
 height: 30px;
 display: inline-block;
 background: red;
float: left;
margin: 2px;

}

score 0 · Accepted Answer

我最终承认我需要使用 JS。我将 id 添加到第四个孩子，然后在 CSS 中我能够从第四个孩子中删除边距（nth child如果我不需要 IE8 支持，我认为所有这些都可以在 CSS 中完成）。

4 回答 4