CSS 3 列中心扩展布局，可以很好地折叠

Question

编辑 2: 另一种描述我想要的方式可能是:3 列，固定在左侧，扩展中心，最小-最大右侧。我只是不想固定权利；我希望它在窗口缩小时折叠到一分钟。我试过 table s，和 3-4 种方式 div s 什么都没用...

---

编辑 3: 这是我目前拥有的:http://jsfiddle.net/Rw8BZ/

1. 居中效果最好，包裹性差。我希望粉色元素在绿色元素之前收缩/包裹。
2. 包裹性好，宽度好，居中不好。表。也许有余量可用。
3. 包裹性好，宽度不好，居中不好。

...从那以后情况变得更糟。颜色是为了说明，它是统一的 bg 颜色。

---

我试图找到/创建一个 3 列布局(不幸的是 CSS2)，其中左侧和右侧是紧凑的，中心是 flex 的并且相对于其他列居中。 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;
}

Answer 1

对于这种类型的布局，我通常使用 jQuery Layout 插件。不是纯 css，而是使用几行 javascript，您可以创建非常灵活的布局，快速响应移动设备上的调整大小甚至旋转。

文档非常广泛，我发现它有一个非常陡峭的学习曲线，你可以在不看文档的情况下自己编写布局，但是一旦你习惯了它，我想你就会爱上它。

http://layout.jquery-dev.net