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后面。

在我的解决方案中，我只是在inner_block之后没有得到页脚，而没有像在x.xem上调用margin-top这样负责任的东西。我刚刚发现了一些z-index内容的链接，这些链接对我没用，因为inner_block从嵌套块中丢失了传递的高度和宽度。

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

你有什么想法吗？

提前致谢。

Answer 1

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

删除position: absolute的{{1}}。
当你浮动inner-block inner-block clear s 的内容时，父容器不会失去高度。
```
float
```
每当使用花车时，请记得.inner_block:after { content: ''; display: block; clear: both; }。
将clear添加到position: relative，将其放在inner_block和header上。
将footer添加到display: block，以便您可以移除img元素下面的小空格（默认显示）。
还要修改边距和宽度以实现布局。

inline

.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容器和clearfix。

现在用另一个div

float

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

Answer 2

您甚至可以尝试以下内容，您的代码很好，只需将.footer margin-top设置为height .header和.inner_block css calc() function。

.header{
  position:relative;
  background-color:black;
  width:100%;
  height:50px;
}

.footer{
  background-color:red;
  width:100%;
  height:50px;
  margin-top:calc(100% - 82%);
}

.inner_block{
  position: absolute;
  width:90%;
  border:solid 1px black;
  padding: 5px;
  background-color:white;
  margin:-2.5% calc(100% - 97%);
}

.column {
    width:30%;
    float:left;
    margin:0 1.6%;
}

.column img {
    max-width:100%;
    height:auto;
}

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

Answer 3

这就是你要找的东西吗？

.header{
  position:relative;
  background-color:black;
  width:100%;
  height:50px;
}

.footer{
  clear:both;
  background-color:red;
  width:100%;
  height:50px;
}

.inner_block{
  position: absolute;
  width:100%;
  border:solid 1px black;
  padding: 5px;
  margin-left: 2.5%;
  margin-top:-2.5%;
  background-color:white;
}

http://jsfiddle.net/8y4e8L08/

Answer 4

使用z-index并不总是有效。您还需要指定'position'属性，以便在帧的某个位置定义z-index。

Z-index是定义元素的“深度”或“高度”的属性。如果您的<header>的z-index为'100'，则;标题内定义的<div>元素，通常会在它上面显示，但是一旦你定义了z-index：50;由于50＆lt; 100，<div>元素将隐藏在其后面。

z-index

的示例

1）http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex

2）https://css-tricks.com/almanac/properties/z/z-index/

希望它有所帮助。

Answer 5

  .header {
        height: 200px;
        width:800px; 
        background-color:#000;
        margin:20px;
    }
   .header {
        margin-bottom: -25px;
    }
    .inner_block {
        width: 35%; 
        height: 150px;
        margin: auto 200px;
        background-color:#FFF;
        border:1px solid #000;
        margin-top: -45px; 

    }
    .column{
        max-width:20%;
        float:left;
        border: 2px soid #999;
        margin:25px;  
    }
    .column img{
         max-width:100%;
        height:auto;
        }

    .footer {
        height: 100px; 
        margin-top: -25px;
        margin:20px;
        background-color:#F00;
        width:800px;

    }
    .content {
        position: relative;
        z-index: 1;
    }

 <div class="header"></div>
   <div class="inner_block">
     <div class="column">
       <img src="download.jpg"/>
        </div>
      <div class="column">
        <img src="download.jpg"/>
       </div>
    <div class="column">
        <img src="download.jpg"/>
      </div>
   </div> 
<div class="footer">
</div>

将div放在重叠的div后面

5 个答案: