CSS 3 列布局，具有流体左列、居中且固定的中间列以及固定右列

Question

我在这个问题上度过了一段痛苦的时光。我在这里想要做的是创建一个简单的三列布局，但有一点改变。我希望中心的“内容”列永远保持在屏幕的中央。右侧的列是固定宽度的，但我希望左侧的列是流动的。目的是位于左栏中的 Logo 将调整大小以适应 980 像素宽的屏幕，而不会遮挡 Logo 的任何部分，但我还想将最大分辨率设置为 450 像素，以适应更高分辨率的屏幕。

---------------------------------------------------------------------------------
| Fluid, image     |                                       |                    |
| inside resizes   |           Content column              | Nav column         |
| max-width: 450px |           fixed width: 600px          | fixed width: 200px |
| min-width: 180px |                                       |                    |
---------------------------------------------------------------------------------

这是我能够完成的最好的方法，但这是一个非常复杂的方法，具有负边距间距。不过，按照左列的完成方式，我无法使“内容”列真正居中。

有什么建议吗？谢谢!

jfiddle

Answer 1

如果使用 display:table ，则无需使用表格布局即可访问表格布局的属性。

然后应该很容易获得接近您正在寻找的东西: http://jsfiddle.net/v5yP3/4/

html {
    background: yellow;
}
#wrapper {
    margin: 0 auto;
    max-width: 1250px;
    min-width: 980px;
    background: #fff;
    display:table;
}
#leftcolumn, #rightcolumn {
    display:table-cell;
    width:450px;
}
#rightcolumn {
    width:200px;
}
#contentcolumn {
    display:table-cell;
    width: 600px;
    background: blue;
}
img {
    width:180px;
    min-width: 100%;
    vertical-align:top;
}

编辑:固定右列宽度