javascript - CSS/JS : Evenly spreading elements across multiple lines

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

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

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

我建议提前决定列数(2 或 3)，然后使用宽度设置为 50% 或 33% 和 text-align 属性到 center。