html - 使用 float : right and left. 用例进行设计

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.*/
}

问题:

当我在宽屏计算机上打开此网页时，它可以完美打开，没有任何问题，但是当我用小宽度屏幕计算机打开它时，第二个 Logo ( .logo2 ) 会落到下一个 Logo 如下图所示:

发生这种情况是因为总共 .logo1 的宽度和.logo2是 655px+465px=1120px 。因此，一旦浏览器的宽度小于或等于 1200px，第二个 Logo ( .logo2 ) 就无法在 .header 中找到位置。它会自动落到下一行。

在这种情况下，我想要 .logo2重叠.logo1如果浏览器的宽度小于两个 Logo 的总宽度( .logo1 和 .logo2 ，在我的情况下或多或少为 1200px)。我怎样才能达到这种效果？请注意，我需要 .logo1向左对齐且 .logo2向右对齐。

谢谢。

Answer 1

为什么要使用 float ？通过 position:absolute; 使用 CSS 定位就完成了一半! http://jsfiddle.net/6sFY5/1/