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

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），然后将第一个放到左边，将另一个放到右边。