CSS / JS：将元素均匀分布在多行中

Question

您如何将元素均匀分布在多行中，例如：

---

wrapper div: <div style="text-align: center">
elements inside: <div style="display: inline-block;
                 padding-left: 10px; padding-right: 10px;">Element</div>

而不是在下一行（包装）只有一个元素：

Element 1        Element 2        Element 3        Element 4        Element 5
                          Element 6

它这样做，散布元素：

Element 1        Element 2        Element 3
Element 4        Element 5        Element 6

Answer 1

如果元素的宽度及其数量不固定，我将编写一个代码，根据情况生成自定义标记。

但是，这可能会变得棘手，因为使用Web介质很难（实际上是不可能）计算文本块的实际大小（以像素为单位）（无法知道浏览器将使用哪种字体并获取其度量）。

我建议事先确定列数（2或3），然后使用其宽度设置为50%或33%并将text-align属性设置为center元素。

Answer 2

如何指定“宽度”样式？

<div style="width: 50px; display: inline-block; padding-left: 10px; padding-right: 10px;">Element</div>

Answer 3

将它们全部浮动，宽度达到50％或33％或任何您需要的宽度。

确保随后清除浮子。