html - 如何在div中均匀分布元素？

Question

我必须将几个元素均匀流畅地放置在另一个 div 中，如下所示:

我已经看到使用 text-align:justify 的技巧，如 ( https://stackoverflow.com/a/6880421/2159250 ) 中给出的，但是给定一个或两个元素，它被放置(对齐)在右侧/左侧，如下所示:(这不是我在找什么)。

如有任何帮助，我们将不胜感激。

Answer 1

左对齐内容如下所示(一个或多个点代表一个空格):

+----------------------------------------------+
|word.word.word.word                           |
+----------------------------------------------+

(1) text-align: justify 不对齐最后(或唯一)行*。一个简单的解决方案是添加一个很长的单词，它只能占一行:

+----------------------------------------------+
|word..........word..........word..........word|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+

(2) 您希望在第一个单词之前和最后一个单词之后有空格。一种简单的解决方案是添加虚拟 词以产生以下结果:

+----------------------------------------------+
|dummy....word....word....word....word....dummy|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+

可以通过添加额外的标记来实现所需的结果。例如:

.row {
    text-align: justify;
}
.row:after {
    display: inline-block;
    content: "";
    width: 100%;
}
.box {
    display: inline-block;
}
.dummy {
    display: inline-block;
}
/**** FOR TESTING ****/
.row {
    margin: 1em 0;
    background: #FC0;
}
.box {
    background: #F0C;
    width: 4em;
    height: 5em;
}
.box:nth-child(even) {
    background: #0CF;
    width: 8em;
}

<div class="row">
    <div class="dummy"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="dummy"></div>
</div>
<div class="row">
    <div class="dummy"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="dummy"></div>
</div>
<div class="row">
    <div class="dummy"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="dummy"></div>
</div>
<div class="row">
    <div class="dummy"></div>
    <div class="box"></div>
    <div class="dummy"></div>
</div>

* text-align-last属性(property)可以在未来使用