Question

以下示例显示左侧和右侧的浮动div，具有两个不同的容器宽度。

对于大容器（或大窗口），左边的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查询。只需在屏幕上以400px及以上的宽度浮动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;
  }
}

容器将以屏幕宽度＆gt; = 400px为中心。并且内部div将浮动到左侧。默认情况下，inner1，inner2和inner3将分别浮动到左侧，右侧和左侧。

EBS IOPS:GB ratio

Answer 4

我认为，在这种情况下，请从display: inline-block;移除.container并在此处添加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：
Example on JSFiddle

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

4 个答案: