如何在另一个父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，如下所示：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

值得注意的是，与flex-box justify-content: space-between不同，text-align:justify属性不能证明最后一行的合理性。

Answer 2

虽然很难说出你可能会问的是什么，也许使用你可以使用flex布局？

在父div的CSS上：

display: flex; justify-content: space-between; flex-wrap: wrap;

你不会对孩子们float: left;感到满意。

小提琴样本：https://jsfiddle.net/c0nduj9r/