CSS 3柱中心展开布局，可很好地折叠

编辑2:描述我想要的内容的另一种方式可能是：3列，固定左侧，扩展中心，最小-最大-右侧。我只是不想权利被固定；我希望它在窗口收缩时塌陷到一分钟。我用

table

s试过，用

div

s试过3-4种方法，但都不管用

---

编辑3:这是我到目前为止得到的：

最好的定心，糟糕的包装。我希望粉色元素在绿色元素之前收缩/包裹

包装好，宽度好，对中不好。桌子。也许可以用一个空白

包装好，宽度不好，对中不好

…然后情况就变得更糟了。颜色用于说明，它是一种统一的bg颜色

---

我试图找到/创建一个三列布局（不幸的是CSS2），其中左侧和右侧紧凑，中心有弹性，相对于其他列居中。例如，如果中心

为

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>

---

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

文档非常广泛，我发现在你不用看文档就可以自己编写布局之前，它有一个非常陡峭的学习曲线，但是一旦你习惯了，我想你会喜欢它的

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