编辑2：另一种描述我想要的方式可能是：3列，左侧固定，中心扩展，右侧最小 - 最大。我只是不想要被修复的权利;我希望它在窗口收缩时折叠到最小值。我已尝试使用table和3-4种div s方式，但无效...
编辑3：这是我到目前为止所做的：http://jsfiddle.net/Rw8BZ/
......从那里开始变得更糟。颜色用于说明，它是均匀的bg颜色。
我正在尝试查找/创建一个3列布局（遗憾的是CSS2），其中左侧和右侧是紧凑的，中心是弹性的，并且相对于其他列居中。 IOW，就像中心<table>为<td>时width=100%工作的方式一样。所以，我目前正在使用display: table，这几乎可以使用。
当宽度缩小时，我想要发生的是当中心柱仍然居中时收缩的一切，但是当没有剩余空间时，右侧开始包裹。但是，在中心使用width=100%使列在列之间居中会使右列立即崩溃。如果我不在中心使用width=100%，则右列会展开，中心不再在其他列之间居中。 min-width和max-width似乎都没有在右栏中推动它做我想做的事情......
编辑1：如果我将其更改为使用右侧的最大宽度，中间没有width=100%，则右侧会根据需要折叠但扩展时不会保留宽度 - 右列只是按比例增长。
伪内容是：
<div id="header">
<div><img width=214px></div>
<div>Some text, 3 lines, 2-3 words each</div>
<div><ul><li><a>menu</a></li>...</ul><div><img><img><img></div></div>
</div>
左列是图像，中心是一些文本，右边是一些小图标图像的短链接。该列表被设置为水平列表，如菜单。
我目前拥有的CSS是：
div#header, div#header * {
margin: 0px;
padding: 0px;
}
div#header {
display: table;
font-family: FranklinGothic,Arial,Helvetica,sans-serif;
text-transform: uppercase;
width: 100%;
}
div#header > div {
display: table-cell;
vertical-align: top;
}
div#header > div:first-child + div {
text-align: center;
width: 100%;
}
div#header > div:first-child + div + div {
text-align: right;
white-space: nowrap;
background-color: blue;
}
div#header li {
padding-left: 1em;
}
div#header li:first-child {
padding-left: 0 !important;
}
答案 0 :(得分：0)
我通常使用jQuery Layout插件来实现这种类型的布局。不是纯粹的CSS，但使用几行javascript，您可以创建非常灵活的布局，快速响应调整大小甚至在移动设备上轮换。
文档非常广泛，我发现它有一个陡峭的学习曲线，然后你可以自己编写一个布局而不用看文档，但是一旦你习惯了它，我想你会爱上它。 / p>