我必须将几个元素均匀流畅地放置在另一个 div 中,如下所示:
我已经看到使用 text-align:justify 的技巧,如 ( https://stackoverflow.com/a/6880421/2159250 ) 中给出的,但是给定一个或两个元素,它被放置(对齐)在右侧/左侧,如下所示:(这不是我在找什么)。
如有任何帮助,我们将不胜感激。
最佳答案
左对齐内容如下所示(一个或多个点代表一个空格):
+----------------------------------------------+
|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)可以在未来使用
关于html - 如何在div中均匀分布元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26192088/