【发布时间】：2014-03-06 08:03:40
【问题描述】：
编辑 2： 描述我想要的另一种方式可能是：3 列，固定左侧，扩展中心，最小-最大右侧。我只是不想固定权利；我希望它在窗口缩小时折叠到一分钟。我用tables 尝试过，用divs 尝试了3-4 种方法，但没有任何效果......
编辑 3： 这是我目前所拥有的：http://jsfiddle.net/Rw8BZ/
- 最佳居中，不良包装。我希望粉色元素在绿色之前收缩/包裹。
- 良好的包装，良好的宽度，不良的居中。表。也许可以在一定范围内使用。
- 包装好，宽度不好，居中不好。
...从那里开始变得更糟。颜色是为了说明，是统一的bg颜色。
我正在尝试查找/创建一个 3 列布局（不幸的是 CSS2），其中左右紧凑，中心是弹性的并且居中 相对于其他列。 IOW，就像 <table> 在中心 <td> 是 width=100% 时的工作方式一样。所以，我目前正在使用display: table，它几乎可以工作。
当宽度缩小时我想要发生的事情是在中心列仍然居中的情况下缩小，但是当没有剩余空间时，右侧开始换行。但是，在中心使用width=100% 以使该列在列之间居中会使右列立即折叠。如果我不在中心使用width=100%，则右列会展开，并且中心不再位于其他列之间的中心。 min-width 和 max-width 似乎都没有在正确的列中工作以推动它做我想做的事......
编辑 1： 如果我将其更改为在右侧使用 max-width，中间没有 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;
}
【问题讨论】：
标签： css multiple-columns fluid-layout liquid-layout