Html 菜单栏布局解决方案_Html_Css

Html 菜单栏布局解决方案

html css

Html 菜单栏布局解决方案,html,css,Html,Css,我在创建正确的菜单栏布局时遇到一些问题我的菜单栏分为三个部分：左侧（徽标），中心（菜单），右侧（登录信息）还有两个不同的菜单，一个是管理员菜单（几个额外的按钮-宽度为701px）和普通用户菜单（宽度为447px）整个菜单栏宽度设置为100% 现在我需要的帮助是为每个部分设置宽度属性如果我将固定宽度（px）设置为中间（菜单）部分，则无法计算其他两个部分的正确宽度百分比。我也不能为其他部分设置固定宽度值，因为屏幕分辨率较小（菜单保持宽）若我将百分比宽度设置为中间（菜单）部分，菜单可能会在

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

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

左侧（徽标），中心（菜单），右侧（登录信息）

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

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

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

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

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

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

HTML:

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

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

管理菜单栏：

常规用户菜单栏：

如果您希望以百分比的形式将主div的总和增加到100%，您可以尝试此CSS并调整每个宽度：

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

当你降低屏幕尺寸时，浮标会跳来跳去。除非你想让它们在太小的时候低于其他部分

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

祝你好运

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