Question

我想将logo1的黑色实心边框放在粉红色之后，但是它会在蓝色后放置，这是容器的颜色。我需要做些什么改变？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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 class="logo1">
</div>
</div>

Answer 2

编辑 - - - - -

Jsfiddle

根据要求，同样的结果，但根据需要编辑了第三个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;
}

OLD ANSWER - - - - -

Jsfiddle

我不太清楚你的意思，我一起快速砍掉了一些东西，看看这是否是你想到的目标。

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

容器高度小于其含量

2 个答案: