在另一个元素顶部位置浮动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

回答

相关问题