容器高度小于其内容物

Question

我希望类徽标 1 的黑色实心边框放在粉红色之后，但它被放置在蓝色之后，蓝色是容器的颜色。我需要进行哪些更改？

.menu-wrap {
  background-color: blue;
  height: 50px;
  padding: 30px 0 0 20px;
}
.menu {
  background-color: pink;
  overflow: hidden;
  width: 700px;
  height: 75px;
}
.logo1 {
  height: 100px;
  border: solid;
}

<div class="menu-wrap">
  <ul class="menu">
  </ul>
</div>
<div class="logo1">
</div>

Answer 1

编辑 -

-

- - -

杰斯菲德尔

按照要求，相同的结果，但根据需要编辑了第三个div 的位置。

定位值有点笨拙，如果您使用div而不是UL作为菜单并将其全部包装在包含div中，则可以更整洁地定位内容。

现在，以下是使用您指定的布局让我工作的方法。

.HTML

<div class="menu-wrap">
  <ul class="menu">
  </ul>
</div>
<div class="logo1">
</div>

.CSS

.menu-wrap {
  background-color: blue;
  height: 50px;
  padding: 30px 0 0 20px;
}
.menu {
  background-color: pink;
  width: 700px;
  height: 75px;
}
.logo1 {
  width: 735px;
  height: 100px;
  border: solid;
  position: absolute;
  top: 128px;
  left: 28px;
}

旧答案

- - - - -

杰斯菲德尔

我

不太确定你的意思，我快速将一些东西拼凑在一起，看看这是否是你心中的目标。

.HTML

<div class="menu-wrap">
  <ul class="menu">
  </ul>
  <div class="logo1">
</div>
</div>

.CSS

.menu-wrap {
  background-color: blue;
  height: 50px;
  padding: 30px 0 0 20px;
}
.menu {
  background-color: pink;  
  width: 700px;
  height: 75px;
}
.logo1 {
  width: 737px;
  height: 100px;
  border: solid;
  margin: -18px 0;
}

Answer 2

.menu-wrap {
  background-color: blue;
  height: 50px;
  padding: 30px 0 0 20px;
}
.menu {
  background-color: pink;
  overflow: hidden;
  width: 700px;
  height: 75px;
}
.logo1 {
  height: 100px;
  border: solid;
}

<div class="menu-wrap">
  <ul class="menu">
  </ul>
<div class="logo1">
</div>
</div>