html - 向左/向右浮动 div，而不在大窗口上将它们分开

Question

以下示例显示了具有两种不同容器宽度的左右浮动 div。

对于大容器(或大窗口)，向左浮动的div贴在左边框，向右浮动的div贴在右边。

当容器很大时，有没有办法强制 div 粘在一起(在容器中水平居中)？请注意，不能固定容器或任何 div 的宽度。

理想情况下，我想避免使用 javascript。

.container {
  display: inline-block;
  border: 1px solid black;
}
.inner1 {
  float: left;
  background-color: #aff;
}
.inner2 {
  float: right;
  background-color: #ffa;
}
.inner3 {
  float: left;
  background-color: #faf;
}

First example with wide container<br />
<div class="container" style="width:400px">
  <div class="inner1"><---------- First</div>
  <div class="inner2">Second
    <br />--------
    <br />------</div>
  <div class="inner3">Third ----------</div>
</div>
<br />
Second example with small container<br />
<div class="container" style="width:100px">
  <div class="inner1"><---------- First</div>
  <div class="inner2">Second
    <br />--------
    <br />------</div>
  <div class="inner3">Third ----------</div>
</div>

编辑:我使用 float 的原因是为了防止 div 的默认排序。当非 float 时，它们按从左到右或从上到下或两者的顺序排列。这种排序有时会阻止有用的空间被填充。例如，想象 div1 宽但不高，而 div2 又瘦又高。如果屏幕足够大，div2 将在 div1 的右侧。 div1 下方和 div2 左侧将留有很多空间。我想把 div3 放在那个空间里。但是由于顺序的原因，div3 会在 div2 的右边或下面。

为了解决这个问题，我使用了 float div，但它产生了我最初提到的另一个问题:向左/向右浮动会使 div 在大屏幕上分开。

如果不用float也能解决问题最好

Answer 1

我还不能评论，因为我很新。所以我就谈谈如果我理解正确的话，你可能正在寻找

vertical-align: middle;

我希望这就是您要找的东西。