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

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

然而，它可能会变得棘手，因为使用网络媒体，很难（实际上不可能）计算文本块的实际像素大小（无法知道浏览器使用什么字体并获得其指标）。

我建议事先决定列数（2或3），然后使用宽度设置为50%或33%和text-align属性的元素{{1 }}

Answer 2

如何指定“宽度”样式？

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

Answer 3

将它们全部漂浮，宽度为50％或33％或任何你需要的。

请务必事后清除浮球。