html - CSS 使 div 在右侧的间隙中居中

Question

我正在努力尝试使用 CSS 设置一个真正基本的布局。我创建了以下 jsFiddle 来帮助解释(代码复制在下面)。

http://jsfiddle.net/drmrbrewer/10jq4zka/1/

基本上，我想要的是让第一个、第二个和第三个 div 排在一行中，第一个和第二个 div 依次尽可能靠左放置，第三个div 居中放置在第二个 div 右侧的空间中。该行应水平填充 100%，以便在调整窗口大小时，第三个 div 将在第二个 div 右侧的空间内保持居中，而第一个和第二个 div 保持静态。

#outer-container {
  position: absolute;
  width: 100%;
}
#inner-container {
  position: relative;
  width: 400px;
}
#one {
  width: 200px;
  text-align: center;
  float: left;
}
#two {
  width: 200px;
  text-align: center;
  float: left;
}
#three {
  width: 200px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

<div id="outer-container">
  <div id="inner-container">
    <div id="one">one</div>
    <div id="two">two</div>
  </div>
  <div id="three">three</div>
</div>

Answer 1

我不确定你为什么需要inner-container。您可以在不使用 inner-container 的情况下实现您正在寻找的内容(当然，如果 html 是可编辑的)。

让我来解释一下，而不仅仅是给出代码:

您可以将前两个 div 向左浮动。这将使它们彼此相邻对齐。然后，您可以在父级上添加一个 text-align:center，这将负责居中对齐第三个 div。

您可以查看 JSFiddle 链接 http://jsfiddle.net/b5jk1d6k/这样您就可以调整大小并看到第三个 div 在调整浏览器窗口大小时居中对齐。

div {
    display:inline-block;
    height: 100px;
    width: 50px;
}
div.outer-container {
    display: block;
    text-align: center;
    width: 100%;
}
.one {
    background-color:orange;
    float:left;
}
.two {
    background-color:red;
    float:left;
}
.three {
    background-color:yellow;
}

<div class="outer-container">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>

希望这有帮助!!!