带有左右列的CSS中心页面

I wont to be able to have my main #page in the middle of the page with 2 columns floated left/right of this. I know this would easily work if I re-order the HTML with the left-column first, although I want the #page to come first in the HTML.

我不能在页面中间放置我的主#page，其中左侧/右侧有2列浮动。我知道如果我首先使用左列重新排序HTML，这将很容易，但我希望#page在HTML中排在第一位。

HTML:

HTML：

<div id="page"></div>
<div id="left-column"></div>
<div id="right-column"></div>

The only way I could think of was to use a 1px transparent div to push the content into the middle, although this is last resort.

我能想到的唯一方法是使用1px透明div将内容推入中间，尽管这是最后的手段。

JSFiddle Example

JSFiddle示例

3 个解决方案

#1

Use a wrapper with display: table; and the children with display: table-cell; Also the #page element MUST be in the middle. Your markup has to reflect the desired layout of your site, otherwise you'll end up using lots more CSS to complicate things that can be done very simply.

使用带有display：table的包装器;和显示的孩子：table-cell; #page元素也必须在中间。您的标记必须反映您网站的所需布局，否则您最终会使用更多的CSS来简化可以非常简单的事情。

HTML:

HTML：

<div id="wrapper">
    <div id="left-column">left column</div>
    <div id="page">page</div>
    <div id="right-column">right clomumn</div>
</div>

CSS:

CSS：

#wrapper
{
    width: 100%;
    display: table;
 }

#right-column {
        width: 15%;
        height: 500px;
}
#page{ 
        width: 70%;
        height: 500px;
}
#left-colum {
        width: 15%;
        height: 500px;
}

#right-column,
#left-column,
#page
{
    display: table-cell;
}

http://jsfiddle.net/abwjW/

http://jsfiddle.net/abwjW/

#2

body {position:relative;margin:0;padding:0;}
#page {margin:0 200px;;background:red;}
#left-column {width:200px;position:absolute;top:0;left:0;background:green;}
#right-column {width:200px;position:absolute;top:0;right:0;background:blue;}

http://jsfiddle.net/sAC3w/33/

http://jsfiddle.net/sAC3w/33/

But you cannot use a footer with this since side columns with overlap with absolute positioning.

但由于侧柱与绝对定位重叠，因此无法使用页脚。

#3

This should work for you: But you will re-order you HTML so it is left - center - right

这应该对你有用：但你会重新订购HTML，所以它是左 - 中 - 右

#wrapper {
        display: table;
}
#right-column {
        width: 15%;
        height: 500px;
}
#page{ 
        width: 70%;
        height: 500px;
}
#left-column {
        width: 15%;
        height: 500px;
}