html - 标题图标、标题和导航栏在屏幕调整大小时溢出标题容器

Question

在图像上调整我的标题图标、标题和导航栏溢出我的标题，它设置为占据屏幕高度的 10%。我尝试在标题 div 中设置元素高度，但这似乎没有任何作用。

任何帮助，将不胜感激。图像（图标溢出标题）和下面的代码。让我知道是否可以进一步澄清。

.banner {
  z-index: 1;
  position: fixed;
  width: 100%;
  background-color: white;
  height: 10%;
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 30%;
  max-height: 100%;
  margin: 0;
  float: left;
  vertical-align: middle;
}

.banner p {
  font-family: "Gentium Basic";
  text-align: left;
  display: block;
  height: 100%;
}

.banner img {
  float: left;
  padding: 5px;
  margin-top: -10px;
  height: 100%;
}

.ban1 {
  padding-top: 50px;
  vertical-align: top;
}

<div class="banner">
  <div class="wrapper">
    <p>
      <img src=UpYours.png height=1%>
      <span class="ban1" style=color:grey>What</span>
    </p>
  </div>

  <div class="navbar">
    <a href="#">me</a>
    <a href="#">you</a>
    <a href="#">what</a>
    <a href="#" class="right">today</a>
  </div>
</div>

标签： htmlcss

Answer 1

我想可能是你float:left;把一切都推了出去。您可以尝试display:flex;使用横幅 div 吗？我在下面修改了你的代码，看看：

.banner {
z-index: 1;
position: fixed;
width: 100%;
background-color: white;
height: 10%;
margin: 0;
padding: 0;
background: #e5fbff;

display:flex;
}

.wrapper {
width: 30%;
max-height: 100%;
margin: 0;
vertical-align: middle;
}

.wrapper p {
font-family: "Gentium Basic";
text-align: left;
display: block;
height: 100%;
margin:0;
}

.wrapper img {
max-height: 100%;
}

.ban1 {
padding-top: 50px;
vertical-align: top;
}

<div class="banner">
<div class="wrapper">
    <p>
        <img src="https://via.placeholder.com/150">
        <span class="ban1" style="color:grey;">What</span>
    </p>
</div>

<div class="navbar">
    <a href="#">me</a>
    <a href="#">you</a>
    <a href="#">what</a>
    <a href="#" class="right">today</a>
</div>
</div>

只是更改了横幅的背景颜色以显示它包含。