css - 屏幕分辨率/缩放自适应网站

Question

我正在为某人制作一个网站，我希望它根据屏幕分辨率和浏览器的缩放比例自行调整大小(我不包括智能手机)。我目前有一个菜单是这样的:

菜单中的每个元素都在一个 div 中，这是 css:

#barre_utilisateur //For the menu bar(the red bar)
{
    height:45px;
    background-color:#A31E39;
    width:100%;
}
#content_boutton_accueil //the home button
{
    margin-left:2%;
    width:200px;
    display:inline-block;
}
#notification //exclamation mark button
{
    cursor:pointer;
    width:60px;
    height:45px;
    display:inline-block;
}

现在，我希望齿轮图标位于用户按钮左侧的右侧。我不知道如何实现这一目标。

此外，当我过度放大时，菜单的右侧部分会偏离其应有的位置，有什么办法可以防止这种情况发生吗？

我正在努力实现的一个很好的例子是新的 outlook 实时页面

Answer 1

您可以相对定位整个菜单 div (#barre_utilisateur)，然后绝对定位其子项。例如:

#barre_utilisateur {
   position: relative;
} 

#cogwheel {
   position: absolute;
   right: 0;
}

另一种方法是在菜单中放置 2 个 div (#barre_utilisateur)，然后将第一个 float 到左侧，另一个 float 到右侧。