設計使用浮動：左和右。使用案例

其設計的一般結構如下所示：

Header of the website

及其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）下降到如下面圖中所示的下一行：

Header with a browser with a small width

這發生的原因是因爲總寬度爲.logo1而.logo2爲655px+465px=1120px。因此，一旦瀏覽器的寬度小於或等於1200px，第二個徽標（.logo2）在.header內找不到位置，並自動下降到下一行。

在這樣的情況下，我想.logo2重疊.logo1如果瀏覽器的寬度小於兩個標識的總寬度（.logo1和.logo2，在我的情況更多或更少的1200像素）。我怎樣才能實現這種影響？請注意，我需要.logo1的左邊是正確的，而.logo2是正確的。

謝謝。

來源

2011-09-13 Bakhtiyor

爲什麼使用浮動？你用這個position:absolute;來使用CSS定位的一半！ http://jsfiddle.net/6sFY5/1/

來源

2011-09-13 18:01:40

犯了錯誤;沒有重疊的工作秩序。 –

理查德是什麼意思？ – Bakhtiyor

我的評論？我不得不編輯我的答案;評論意味着作爲編輯的解釋，以便在我編輯之前拍攝高峯。 –

添加負保證金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，如果這是您想要的。

來源

2011-09-13 18:04:02 ThatMatthew

試試這個，

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

來源

2011-09-13 18:04:03 anglimasS

這是一個讓#header包含浮動塊的舊解決方案，但這不是OP所要求的。標題已經有一個高度。 – ThatMatthew

查看鏈接http://jsfiddle.net/6sFY5/9/ – anglimasS

但它不起作用。 – Bakhtiyor

您可以使用絕對定位：

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>

來源

2011-09-13 18:05:50

你的格式很好。 – anglimasS

設計使用浮動：左和右。使用案例

回答

相關問題