html - 固定 Div 内的元素在浏览器上混合调整大小

Question

<div id="mainMenu">
   <div id="Title">
       My Website
   </div>
   <div id="Login">
       Login
   </div>
</div>

在 CSS 中，#mainMenuhasposition:fixed;和left:0; right:0; width:100%; #Titleisfloat:left; #Login是float:right;

浏览器窗口最大化时没有问题，但是当我调整它的大小时，里面的元素混合在一起，当它变得非常小时，右边的元素在左边的元素下面，我怎样才能保持父Div的相同大小? 即使我调整浏览器的大小？

Answer 1

#mainMenu在不重新定位孩子的情况下为您的孩子提供一个最小宽度：

#mainMenu {
    min-width: 600px;
    ....
}

Answer 2

在 CSS 中，设置：

​#mainMenu{
    position: fixed;
    top:0;
    left:0;
    width:100%;
}
#Title{
    position:absolute;
    left:0;
}
#Login{
    position:absolute;
    right:0;
}

工作小提琴

http://jsfiddle.net/5pt6C/ ​</p>