在另一個元素頂部位置浮動div

我有一個標題浮動左側和電話號碼浮動右側。當屏幕不夠寬時，電話號碼會跳到徽標下方，這不是我想要的。在另一個元素頂部位置浮動div

由於大多數徽標圖像只是背景漸變，所以我希望將電話號碼放置在徽標元素頂部，當屏幕窄於818像素時。

我該怎麼做？

這裏的基本代碼：

你可以通過把div.tel您的徽標出現之前解決你的問題的一部分

<div id="head-wrap"> 
    <a class="home-link" href="http://example.com"> 
     <img src="logo.png" class="logo"> 
    </a> 
    <div class="tel"> 
     <a href="tel:555555555" class="phone"> 
      <p class="phone"> 
       <img src="phone-icon.png">555 555 555 
      </p> 
     </a> 
    </div> 
</div>

.home-link { 
    float:left; 
} 
.tel { 
    float: right; 
} 
.logo { 
    width: 657px; 
}

來源

2016-03-02 Jeppe Bech

使用媒體查詢 – RRR

是的，我知道的不多。你能幫我解碼嗎？ –

第一。這樣，如果您沒有足夠的空間，它將顯示在徽標頂部。然後，你可以使用一個媒體查詢把電話號碼左邊比如像這樣：

@media screen and (max-width: 818px) { 
    .tel { 
    float: left; 
    } 
}

小提琴：https://jsfiddle.net/s2Lubqqp/1/

來源

2016-03-02 13:34:59

試過了，但是這完全破壞了'div.headwrap'下面的導航菜單。 –

既然你需要在標誌，你需要保持自己的位置絕對和相同的重疊電話位置

也因爲您已將徽標的寬度設置爲寬度：657px;更好地讓它自動當調整窗口...希望對你有用

這裏是媒體查詢:)

@media screen and (max-width: 818px) { 
    .tel { 
    width:auto; 
    position:absolute; 
    left:5px; 
    top:5px; 

} 
.logo { 
    width: auto; 
    position:absolute; 
    left:5px; 
    top:5px; 
} 
}

來源

2016-03-02 13:43:54 RRR

雖然這確實將電話號碼放在徽標頂部，但它也會阻止電話號碼向右浮動。另外，你究竟想用'left：5px;'和'top：5px;'完成什麼？ –

@JeppeBech只是試圖給5px的保證金頂部和左邊多數民衆贊成它..如果你不想你可以將其設置爲0 – RRR

嗯，把'.tel {右：5px; }'而不是工作。 –

你可以嘗試這樣的事情：

.home-link { 
    float:left; 
} 
.tel { 
    float: right; 
} 
.logo { 
    width: 657px; 
} 

@media only screen and (max-width: 818px) { 
    .home-link { 
    width: 30%; 
    max-width: 300px; 
    } 
    .logo { 
    width: 100%; 
    } 
}

這您可以更改主頁鏈接部分的百分比寬度，並強制標識使其與「寬度：100％」相匹配。

The fiddle is here

來源

2016-03-02 13:44:38

這只是使徽標更小。 –

的確，我認爲解決這個問題的方法並不完全正確。標誌不應該包含漸變，而應該是png，背景應該是漸變，所以徽標可以調整其寬度，而不必在窄屏幕上重疊。但絕對定位是你的問題的答案。 –

在另一個元素頂部位置浮動div

回答

相關問題