两侧和宽度上有两个流体柱：中间柱为自动

Question

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

http://jsfiddle.net/d32an55L/

<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

在您说明意图之后，只有 2 种方法（我目前能想到的）来做到这一点。如果您需要保持反向兼容性，则需要使用 JavaScript。如果您只关心更现代的浏览器，CSS3 有一个属性和display 模式称为flex。它非常易于使用。这是修改后的 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/

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