使用浮动设计：右浮动和左浮动。使用案例

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 中找到位置，并且会自动下降到下一行。

在这种情况下，如果浏览器的宽度小于两个徽标的总宽度（.logo1），我希望 .logo2 重叠 .logo1 code> 和 .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

试试这个，

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

Answer 4

为 logo1 添加负边距，如下所示：

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

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

已编辑，因为第一次尝试仍然会使徽标 2 的宽度小于 655 像素。

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