中心位置固定三列布局

Question

我有

----------------------------------------------------
|                                                  |
|  |-------------------------------------------|   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |  15%   |   |
|  |   15%   |         70%            |  fixed |   |
|  |  fixed  |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  |         |                        |        |   |
|  | ------------------------------------------|   |
|        max width of the this 100% is 400px       |
=====================================================

http://jsfiddle.net/fwQq4/

我无法实现的是整个三列的最大宽度为400px;并使三列居中。

我如何实现这一目标。

Answer 1

CSS2没问题，请参阅this example fiddle：

标记：

<div class="wrapper">
    <div id="left">
    </div>
</div>
<div id="middle">
</div>
<div class="wrapper">
    <div id="right">
    </div>
</div>

样式表：

html,
body {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 0;
}
.wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
#left {
    width: 15%;
    background: red;
}
#middle{
    width: 70%;
    margin-left: 15%;
    background: yellow;
}
#right {
    width: 15%;
    margin-left: 85%;
    background: red;
}