Question

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

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

左（徽标），中心（菜单），权利（登录信息）

还有两个不同的菜单，一个用于管理员（几个额外的按钮 - 宽度为701px）和常规用户菜单（宽度为447px）。

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

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

如果我将固定宽度（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*/

管理员菜单栏： enter image description here

常规用户菜单栏： enter image description here

Answer 1

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

#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*/

Answer 2

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

浮动已经关闭，因为当您降低屏幕尺寸时它们会跳转。除非你想让它们太小，否则它们会低于其他部分。

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

祝你好运。：）

菜单栏布局解决方案

2 个答案: