html - 侧面有两个流体柱，宽度为 :auto for the middle column

Question

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

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

在您说明意图的情况下，只有两种方法(目前我能想到)可以做到这一点。如果您需要保持反向兼容性，则需要使用 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/

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