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有一个名为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/

如果您需要兼容旧版浏览器，我可以提取一些内容。

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

1 个答案: