如何使用css选择剩余宽度的一半？ [英] How do you select half the remaining width using css?

问题描述

我想要有三列，一个以中间为页面的1000像素中间列，然后是左边和右边占用剩余宽度的一列。

I want to have three columns, a 1000px middle column that is centered to the page and then a column on the left and right that takes up the remaining width.

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

I basically want something that looks like this:

其中包装器为1000像素，两个侧边空间为剩余总空间的一半。

Where the wrapper is 1000px and the two side spaces are half of the remaining total space.

推荐答案

您可以使用 margin：0px auto 轻松地将元素居中。这将在元素的左侧和右侧留下一个空格。

You can easily centre an element with margin: 0px auto. This will leave a space on the left and right of the element. If the element is inside another which takes up the entire width, then a background can be placed and centred inside it.

一个例子可能是：

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

然后CSS将如下所示：

Then the CSS would look like:

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

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

不可能将内容放在#content div 。

It wouldn't be possible to put content either side of the #content div.

这篇关于如何使用css选择剩余宽度的一半？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！