使用float设计：左右。使用案例

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。因此，一旦浏览器的宽度小于或等于1200px，第二个徽标（.logo2）就无法在.header内找到位置，它会自动落到下一行。

在这种情况下，如果浏览器的宽度小于两个徽标（.logo2和.logo1的总宽度，我希望.logo1重叠.logo2，在我的情况下或多或少1200px）。我怎样才能达到这个效果？请注意，我需要.logo1为左手辩护，.logo2为右手辩护。

谢谢。

Answer 1

为什么要使用浮动？你使用position:absolute;的CSS定位已经过了一半！ 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在宽度小于655px时掉落。

编辑2：您还可以在.logo2上设置z-index，使其覆盖logo1，如果这是您想要的。

Answer 4

试试这个，

<div class="header">
   <div class="logo1"></div>
   <div class="logo2"></div>
   <div style="clear:both"></div>
</div>