如何使用css选择剩余宽度的一半？

Question

我希望有三列，一个以页面为中心的1000px中间列，然后左右一列占据剩余的宽度。

我基本上想要这样的东西：

包装器为1000px且两个侧面空间为剩余总空间的一半。

Answer 1

您可以使用margin: 0px auto轻松地将元素居中。这将在元素的左侧和右侧留下空格。如果元素位于占据整个宽度的另一个元素内，则可以放置背景并将其置于其中心。

一个例子可能是：

<div id="container">
  <div id="content"></div>
</div>

然后CSS看起来像：

#container {
  width: 100%;
  /* Background properties go here. */
}

#content {
  margin: 0px auto;
  width: 1000px;
}

不可能在#content div的任何一侧放置内容。

Answer 2

对于纯CSS方法，请尝试http://jsfiddle.net/hKB9T/2/之类的内容（确保扩大浏览器窗口，使“结果”框大约为1200px左右）

它不完整（根据您的要求，您可能需要摆弄.center元素的位置），但它应该让您走上正确的轨道。

<div id="page">
    <div class="center">center column</div>
    <div class="leftcol">
        <div class="inner">left column</div>
    </div>
    <div class="rightcol">
        <div class="inner">right column</div>
    </div>
</div>

和

.leftcol, .rightcol {
    width: 50%;
    float: left;
}
.leftcol .inner {
    margin-right: 500px;
    height: 200px;
}
.rightcol .inner {
    margin-left: 500px;
    height: 200px;
}
.center {
    width: 1000px;
    margin: 0 auto -200px auto;
    background-color: #eee; /* just for illustration */
}

Answer 3

所以我们说你的“页面宽度”是1024px的宽度。我会做这样的事情 -

HTML：

<div id="page_content">
  <div id="element_left">
  </div>
  <div id="centered_element">
  </div>
  <div id="element_right">
  </div>
</div>

的CSS：

#page_content { width:1024px; margin:0px auto 0px auto;}
#element_left { width:12px; float:left;}
#element_right { width:12px; float:left;}
#centered_element { width:1000px; margin:0px auto 0px auto; float:left;}