设计使用浮动:右和左。用例

Question

我想征求您的意见，关于我的网页标题的设计。

其设计的一般结构如下：

​

​

及其HTML部分：

<div class="header">
   <div class="logo1"></div>
   <div class="logo2"></div>
</div>

及其CSS部分：

.header{
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 160px;
   border: 1px solid #48ace1;   
}

.logo1{
   float: left;
   width: 655px;
   height: 160px;
   background: url(images/logo1.png) no-repeat 0px 2px;  
}

.logo2{
   float: right;
   width: 465px;
   height: 160px;
   background: url(images/logo2.png) no-repeat 0px 2px;
   position: relative; /* it is set to relative because inside this layer I have 
                          several elements with absolute position.*/
}

问题：

当我在具有宽屏幕的计算机中打开这个网页时，它完全打开，没有任何问题，但是当我用一台屏幕小的计算机打开它时，第二个徽标(.logo2)下降到下一行，如下图所示：

​

​

之所以会出现这种情况，是因为.logo1和.logo2的总宽度是655px+465px=1120px。因此，一旦浏览器的宽度或多或少小于1200 to，第二个徽标(.logo2)就无法在.header中找到位置，它会自动下降到下一行。

在这种情况下，如果浏览器的宽度小于两个徽标的总宽度(在我的例子中，.logo2和.logo2，或多或少是1200 my )，我希望.logo1重叠。我怎样才能达到这种影响呢？注意，我需要.logo1对左对齐，.logo2对右对齐。

谢谢。

Answer 1

为什么要用浮子？在使用CSS定位与position:absolute;！http://jsfiddle.net/6sFY5/1/的过程中

Answer 2

您可以使用绝对定位：

http://jsfiddle.net/LuRDk/

.header{
    position:relative;
    height:84px;
    padding:20px;
    border:1px solid green;
}

.logo{
    position:absolute;
    width:80px;
    height: 80px;
    border:1px solid red;
}

.right{right:20px;}
.left{left:20px;}

<div class="header">
    <div class="logo left"></div>
    <div class="logo right"></div>
</div>

Answer 3

向logo1添加一个负值，如下所示：

.logo1
{
    float: left;
    width: 655px;
    margin-right: -655px;
    height: 160px;
    background: url(images/logo1.png) no-repeat 0px 2px;  
}

这意味着窗口可以尽可能窄，并且logo2永远不会下降。

编辑，因为第一次尝试仍然会使徽标2下降宽度小于655 at。

编辑2:您也可以在.logo2上设置一个z索引，这样它就可以覆盖logo1，如果这是您想要的话。