两侧有两个流体柱，中间柱为 width:auto

Question

我需要创建一个 CSS/HTML 导航菜单，其中的徽标居中对齐，菜单选项位于两侧。我想到了这样做：

<div id="wrapper">
    <div id="left">aaaa</div>
    <div id="center"> Center content</div>
    <div id="right">aaaa</div>
</div>

#wrapper{
    display:table;
    width:100%;
    height:100%;
}
#wrapper > div{
    display:table-cell;
    height:100%;
}
#left {
    background-color:pink;
    text-align:right;
}
#center {
    background-color:green;
    width:100px;
}
#right {
    background-color:red;
}
body, html{
    width:100%;
    height:100%;
}

问题是我不知道如何使中间栏的宽度适合栏内的内容，例如 width:auto;

你们知道这是否可以做到吗？是否有更好的方法来实现这一点？

谢谢。

编辑：我只需要使中间栏的宽度与其包含的内容一样宽，同时侧栏保持流畅。

Answer 1

在你说明意图的情况下，只有两种方法（我现在能想到的）可以做到这一点。如果需要保持反向兼容性，则需要使用 JavaScript。如果您只关心更现代的浏览器，CSS3 有一个称为 flex 的属性和 display 模式。它非常易于使用。这是修改后的 CSS 来实现它：

#wrapper {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    width:100%;
    height:100%;
}

#wrapper > div {
    height:100%;
}

#left {
    background-color:pink;
    text-align:right;
    flex:1 0 auto;
}

#center {
    background-color:green;
    flex:0 1 auto;
}

#right {
    background-color:red;
    flex:1 0 auto;
}

body, html {
    width:100%;
    height:100%;
}

JSFiddle：http://jsfiddle.net/cwj7132y/

如果您需要旧版浏览器的兼容性，我可以画一些东西。

两侧有两个流体柱，中间柱为 width:auto

Two fluid columns on the sides and width:auto for the middle column

html

css

menu

fluid-layout