javascript - 如何在另一个父 div 中对齐不同宽度的 div？

Question

这张图片将解释我的意思:

有一个透明的 div，它包含所有其他小的深灰色 div，其中有红色的虚拟文本，

我将父div设置为

width:80%;
    height:100%;
    margin: auto;
    padding:0 0 0px;

并且子div的宽度不一致它们的宽度变化取决于这里文本的长度这里是CSS

float:left;
width:auto;
height:1.5em;
display: inline-block;

现在，当创建新的子 div 时，它们从父 div 的左侧开始完全对齐，但是在右侧，它们根本没有与父 div 的末尾对齐(如图所示)看起来很乱。如何做到这一点，是否可能只需要 CSS 或 Javascript？

<div id="parent"><span class="child"></span></div>

Answer 1

除了已经提到的 Flex-box 解决方案之外，您可以像这样在父容器上简单地使用 text-align:justify:

.container {
  background: #333;
  padding: 14px;
  font-size:0;
  text-align:justify;
}
.container div {
  display:inline-block;
  margin:4px;
  background: #111;
  border-radius: 3px;
  padding: 5px;
  line-height: 1em;
  color: red;
  font-size:16px;
}

<div class="container">
  <div>Maecenas faucibus</div>
  <div>mollis</div>
  <div>interdum</div>
  <div>Nullam</div>
  <div>id</div>
  <div>dolor</div>
  <div>id nibh ultricies</div>
  <div>vehicula</div>
  <div>ut</div>
  <div>id</div>
  <div>elit</div>
  <div>mollis</div>
  <div>interdum</div>
  <div>Nullam</div>
  <div>id</div>
  <div>dolor</div>
  <div>faucibus</div>
  <div>id nibh ultricies</div>
  <div>vehicula</div>
  <div>ut id</div>
  <div>elit</div>
  <div>dolor</div>
  <div>id nibh ultricies</div>
  <div>vehicula ut</div>
  <div>mollis</div>
  <div>interdum</div>
  <div>Nullam</div>
  <div>id</div>
  <div>dolor</div>
  <div>faucibus</div>
  <div>id nibh ultricies</div>
  <div>vehicula</div>
  <div>ut id elit</div>
</div>

值得注意的是，与 flex-box 的 justify-content: space-between 不同，text-align:justify 属性不会对齐最后一行。