Html 定心固定位置的三列布局

我有

我无法实现的是整个三列的最大宽度为400px；并使三根柱子居中

如何实现这一点。

CSS2没有问题，请参阅：

标记：

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

---

最简单的方法是-指定容器的高度-但是，您需要使用字体大小和/或宽度。@dash我已经编辑了问题现在检查您需要将它们放在容器中并设置宽度。如果它们在这个容器中浮动（参见JSFIDLE中的#container类，它也是浮动的），那么它们将填充宽度。然而，你担心的是内容正在流失吗？您需要降低字体大小以防止发生这种情况，或者设置溢出：无；你是说你想达到这样的目标这将修改容器以使用绝对定位。注意左边的边距必须是宽度的一半。如果这也很重要的话，从IE6开始就可以了。如果div上没有足够的内容，布局就会中断，对。很好！更新了答案和小提琴。太棒了，太好了！任何关于我在哪里可以学习这类东西的好CSS的指针都是我学习基础知识的地方。接下来我用常识学到的一切，如果我现在想要一些额外的具体信息，我就用。（我很可能现在就被枪杀了。）潘：）具体信息：++（CSS3）++MDN（以及“课程”的Opera OWSC）

<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;
}