2

我在创建正确的菜单栏布局时遇到了一些问题。

我的菜单栏分为三个部分：

left (logo) , center (menu) , right (登录信息)

还有两种不同的菜单，一种是管理员菜单（很少有额外的按钮 - 宽度为 701px）和普通用户菜单（宽度为 447px）。

整个菜单栏宽度设置为 100%。

现在我需要帮助的是为每个部分设置宽度属性。

如果我将固定宽度（px）设置为中心（菜单）部分，我无法计算出其他两个部分的正确宽度百分比。由于屏幕分辨率较小（菜单保持宽），我也无法为其他部分设置固定宽度值。

如果我将百分比宽度设置为中心（菜单）部分，菜单可能会在较小的屏幕分辨率下中断。

那么最好的解决方案是什么？

HTML：

<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>

CSS：

#main {
    width:100%;
    height:77px;
    background-color:#373737;
    }

    #left, 
    #center,     
    #right {
        height:77px;
        }

    #left {
        float:left;
        } /* width? % or px*/

    #center {
        display:inline-block;
        } /* width? % or px*/

    #right {
        float:right;
        } /* width? % or px*/

管理菜单栏： 在此处输入图像描述

普通用户菜单栏： 在此处输入图像描述

4

2 回答 2

1

如果您希望以百分比汇总到主 div 的 100%，您可以尝试这个 CSS 并调整每个宽度：

#main {

    width:100%;
    height:77px;
    background-color:#373737;
    padding:5px;
}

#left, #center, #right {height:77px;}

#left {float:left;background-color:black;width:25%}  /*width? % or px*/
 #center {display:inline-block;background-color:blue;width:50%; float:left}/* width? % or px*/
#right {float:left;background-color:yellow;width:25%}  /*width? % or px*/​
于 2012-05-24T13:38:22.367 回答
0

我认为您可能必须使用 JavaScript 来根据需要调整元素的大小。有几种解决方案，但没有一个允许混合动态和静态宽度。

浮动是因为当你降低屏幕尺寸时它们会跳来跳去。除非你想让它们在太小时低于其他部分。

只需将每个 div 视为一个单独的元素，而不是将它们一起工作。如果您的目标是跨浏览器兼容性，我强烈建议您不要在这种情况下使用浮点数。

  • 祝你好运。:)
于 2012-05-24T14:14:40.397 回答