Question

我有一个标题，左侧有一个徽标，右侧有一个电话号码。当屏幕不够宽时，电话号码会跳到徽标下方，这不是我想要的。

由于大部分徽标图像都只是背景渐变，所以当屏幕比818px窄时，我想将电话号码放在徽标元素的顶部。

我该怎么做？

这是基本代码：

<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;
}

Answer 1

首先，您可以将div.tel放在徽标之前解决部分问题。这样，如果没有足够的空间，它将显示在徽标的顶部。然后，您可以使用媒体查询将电话号码放在左侧，例如：

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

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

Answer 2

由于您需要在徽标上重叠手机，因此您需要保持其位置绝对和相同的位置

因为你已经将徽标的宽度设置为宽度：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;
}
}

Answer 3

你可以尝试类似的东西：

.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

将浮动div放在另一个元素的顶部

3 个答案: