向左/向右浮动 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>

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

为了解决这个问题，我使用了浮动 div，但它产生了我最初所说的另一个问题：浮动左/右使 div 在大屏幕上分开。

如果不用浮点数也能解决问题，那就最好了。

Answer 1

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

vertical-align: middle;

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

Answer 2

你的意思是像this 这样的东西吗？只需从.inner3 中删除浮动即可。

.container {
  display: inline-block;
  border: 1px solid black;
}
.inner1 {
  float: left;
  background-color: #aff;
}
.inner2 {
  float: right;
  background-color: #ffa;
}
.inner3 {
  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>

Answer 3

您可以使用 CSS3 @media 查询。只需在屏幕上浮动 400 像素及以上宽度的 div。

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

@media (min-width: 400px) {
  .container {
    margin: 0 auto;
  }
  .inner1 {
    float: left;
  }
  .inner2 {
    float: left;
  }
  .inner3 {
    float: left;
  }
}

容器将以屏幕宽度为中心 >= 400 像素。内部 div 将浮动到左侧。默认情况下，inner1、inner2、inner3 会分别向左、向右、向左浮动。

Example on JSFiddle

Answer 4

我认为，在这种情况下，从 .container 中删除 display: inline-block; 并在此处添加 overflow: hidden; 并添加到 .inner3 中：

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

编辑 jsfiddle：
jsfiddle-link