如何自动填充剩余空间的余量？

Question

我每3个块分别给出一个ID，如下所示：#HEAD-LEFT，#HEAD-CENTER和#HEAD-RIGHT。所有3个块都浮动到左侧。我想在#HEAD-LEFT下面做更多的方块。

不幸的是，字符串上升了，因为#HEAD-RIGHT的右侧有多余的空间。我知道如果我计算像素并给出margin-right可以解决。有什么方法可以自动给margin-right来填充额外的空间吗？

我尝试了margin-right: auto;，但是没有用。

请请不要使用网格来解决此问题。

CSS ：

#HEAD-LEFT{
    font-family: 'Indie Flower', cursive;
    font-size:40px;
    float:left;
    height: 117.4px;
    border-left:2px black solid;
    border-top:2px black solid;
    border-bottom:2px black solid;
    margin-left:258.5px;
    padding-left:30px;
    padding-right: 30px;
    padding-top:45px;
    margin-top:20px;
}

#HEAD-CENTER{
    font-family: 'Indie Flower', cursive;
    font-size: 70px;
    text-align: center;
    letter-spacing: 15px;
    padding: 30px;
    border: 2px black solid;
    width: 500px;
    float: left;
    margin-top:20px;
}

#HEAD-RIGHT{
    font-family: 'Indie Flower', cursive;
    font-size:40px;
    float:left;
    height: 117.4px;
    border-right:2px black solid;
    border-top:2px black solid;
    border-bottom: 2px black solid;
    padding-left:30px;
    padding-right: 30px;
    padding-top:45px;
    margin-top: 20px;
}

Answer 1

CSS flexbox非常适合此类问题-签出-https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
  display: flex;
  justify-content: center;
  height: 300px; /* Or whatever */
  border: 1px solid #000;
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  border: 1px solid #2f2;
}

<div class="parent">
<span class="child">One</span>
<span class="child">Two</span>
<span class="child">Three</span>
</div>