带有左右列的CSS中心页面

Question

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

HTML：

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

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

JSFiddle Example

Answer 1

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

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：

#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/

Answer 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/

但是由于侧柱与绝对定位重叠，所以不能使用页脚。

Answer 3

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

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