Question

我正在努力尝试使用CSS设置一个非常基本的布局。我创建了以下jsFiddle以帮助解释（代码复制如下）。

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

基本上，我想要的是第一个，第二个和第三个div在一行上，第一个和第二个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's浮动。这将使它们彼此相邻。然后，您可以在父级上添加text-align: center，这将照顾居中对齐第三个div。

您可以查看JSFiddle链接reference，以便您可以调整大小，并在调整浏览器窗口大小时看到第三个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>

希望这有帮助!!!

Answer 2

添加到Satwik Nadkarny的答案，如果您知道div 1和2设置为200px，您可以通过给出div 3的宽度将3设置为剩余：

width: calc (100% - 400px);

只获取浏览器窗口的宽度并减去div 1和2的宽度。

div {
  display:inline-block;
  height: 100px;
  width: 50px;
}

div.outer-container {
  display: block;
  text-align: center;
  width: 100%;
}

.one {
  background-color:orange;
  float:left;
  width: 200px;
}
.two {
  background-color:red;
  float:left;
  width: 200px;
}

.three {
  background-color:yellow;
  width: calc(100% - 400px);
}

CSS将右边的间隔居中

2 个答案: