html - 将 div 放置在重叠 div 后面

Question

我有以下设置 http://jsfiddle.net/47x60k4w/529/ .

HTML

<div class="header">
header
</div>
<div class="inner_block">
    <div class="column">
        <img src="xxx" />
    </div>
    <div class="column">
        <img src="xxx" />
    </div>
    <div class="column">
        <img src="xxx" />
    </div>
</div>
<div class="footer">
footer
</div>

inner_block 应与 header 类重叠，页脚应放置在 inner_block 的正后方。

在我的解决方案中，如果不做一些不负责任的事情，比如调用带有 x.xem 的 margin-top ，我就不会得到 inner_block 后面的页脚。我刚刚找到了一些带有 z-index 内容的链接，这些链接对我来说不起作用，因为 inner_block 丢失了嵌套 block 中传递的高度和宽度。

结果应该看起来像这个漂亮的模型。

你有什么想法吗？

提前致谢。

Answer 1

所以我对您的代码进行了以下更改:

1. 删除inner-block的position:absolute。

2. 当您 float 内部 block 的内容时，您需要清除 float ，以便父容器不会失去高度。

   .inner_block:after {
     content: '';
     display: block;
     clear: both;
   }
   

   每当使用 float 时，请记住清除它。

3. 向inner_block添加了position:relative，以将其定位在页眉和页脚上方。

4. 在 img 中添加了 display: block，以便您可以删除 inline 元素(默认显示)。

5. 还对边距和宽度进行了一些修改以实现布局。

.header {
  position: relative;
  background-color: black;
  width: 100%;
  height: 50px;
}
.footer {
  clear: both;
  background-color: red;
  width: 100%;
  height: 50px;
}
.inner_block {
  position: relative;
  /*width: 100%;*/
  border: solid 1px black;
  padding: 5px;
  margin-left: 2.5%;
  margin-top: -2.5%;
  margin-right: 2.5%;
  margin-bottom: 2.5%;
  background-color: white;
}
.inner_block:after {
  content: '';
  display: block;
  clear: both;
}
.column {
  max-width: 30%;
  float: left;
  margin-right: 2.5%;
}
.column:first-child{
    margin-left: 2.5%;
 }
.column:last-child{
    margin-left: 0;
 }
.column img {
  max-width: 100%;
  height: auto;
  display: block;
}

<div class="header">

</div>
<div class="inner_block">
  <div class="column">
    <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
  </div>
  <div class="column">
    <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
  </div>
  <div class="column">
    <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
  </div>
</div>
<div class="footer">
  test
</div>

希望这能让您抢占先机。检查一下并让我知道您对此的反馈。谢谢!

替代解决方案:

这里有一个使用 flexbox 的解决方案，它更容易设置:

首先移除 float 容器和clearfix。

现在用另一个 div 包裹 inner_block

.inner_block_wrapper {
  margin: -2.5% 2.5% 2.5% 2.5%;
  background-color: white;
  position: relative;
}
.inner_block {
  border: solid 1px black;
  background-color: white;
  padding: 5px;
  display: flex;
  justify-content: center;
}
.column {
  margin: 5px;
}

使用 display: flex 允许图像沿行占据可用空间，并且 justify-content: center 将其沿中心对齐。看看这个!

.header {
  position: relative;
  background-color: black;
  width: 100%;
  height: 50px;
}
.footer {
  clear: both;
  background-color: red;
  width: 100%;
  height: 50px;
}
.inner_block_wrapper {
  margin: -2.5% 2.5% 2.5% 2.5%;
  background-color: white;
  position: relative;
}
.inner_block {
  border: solid 1px black;
  background-color: white;
  padding: 5px;
  display: flex;
  justify-content: center;
}
.column {
  margin: 5px;
}
.column img {
  max-width: 100%;
  height: auto;
  display: block;
}

<div class="header">

</div>
<div class="inner_block_wrapper">
  <div class=" inner_block ">
    <div class="column ">
      <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg " />
    </div>
    <div class="column ">
      <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg " />
    </div>
    <div class="column ">
      <img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg " />
    </div>
  </div>
</div>
<div class="footer ">
  test
</div>