CSS动态内容的水平分布

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

我最初尝试使用“使用内联块和对齐文本”技术this页;然而，当有更多的孩子比合适的时候（例如，当有两排）时（看第二行here），它似乎表现得有点不切实际，所以我认为这不会奏效。

* 编辑：其实我刚才意识到，这实际上不是飘忽不定，这是间隔第二行是否正确，但我想，而不是（在这种特定情况下无论如何...）是三个红色方框在第二条线上占据第一条线的前三个位置的位置，在最后留下两个位置，而不是将它们分开）......所以我认为总的来说这种技术不太可能用于我。

有没有其他方法可以达到上述目的。我宁愿不必使用JS，但如果没有其他方式，那么我愿意接受建议。

我最终承认我需要使用JS。我向第四个孩子添加了id，然后在CSS中，我可以从第四个孩子中删除保证金（如果我不需要IE8支持，我假设所有这些都可以在CSS中使用nth child完成）。

编辑：最后最终得到我想要的东西 - http://jsfiddle.net/byronyasgur/kUgBA/14/

2013-01-15 22:07:34 byronyasgur

这不是失败，这是花车的本机行为。

如果你想要更多的适合每行，使容器更大或箱子变窄。

如果你不想让它们环绕，可以将overflow:auto添加到你的容器的CSS中，你会得到一个滚动条。

2013-01-15 19:12:53

对不起有一个误区，不知道我怎么把你在错误的轨道上......我会尝试修改我的问题...但它的不是我不希望他们包装，其实我是。问题是，当我把一个额外的一个导致包装布局似乎有点不正常....看到这里http://codepen.io/anon/pen/ysvIg – byronyasgur

使用float：left而不是display：内联块似乎解决了这个问题。 –

我无法复制这个。我正处在一个JavaScript解决方案的中间，所以我想我会专注于...谢谢 – byronyasgur

您需要删除容器的宽度并添加display: inline-block;以允许dic容器具有任何内容的宽度。另外，在为了使div来大小添加到overflow: auto;产生的div的量在它

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

2013-01-15 19:27:30

包含div需要有一个固定的宽度。更新我的问题 – byronyasgur

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

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

}

2013-01-15 20:40:48 Scott

回答