Question

我正在我的个人网站上工作，所有内容（大部分内容）都在索引页面上。前3个部分工作正常，但最后一节似乎被打破了。我想这可能是因为弹性，但我不确定。

谢谢你们的帮助:)

另外，我知道我的图像可能在笔中搞砸了。我要回去进行媒体查询来修复它们

HTML

  <h2>Explore my Work</h2>
  <div class='imageContainer'>
    <a href="#"><img src="#"></a>
    <a href="#"><img src="#"></a>



  </div>

</div>

<div class="contact">
  <h3>Hello World</h3>
</div>

CSS

.myWork {
  position: absolute;
  text-align: center;

  background:linear-gradient(#333,#5a5454);
  height:100%;
  width:100%;



}
.myWork h2 {
  position:relative;
  margin-top: 4%;
  font-size: 4em;
  color:white;
  text-shadow: -4px 3px 12px rgba(0, 0, 0, 1);
}
.myWork img {
  width: 500px;
  height:500px;

  border:4px solid black;
  border-radius: 5px;

}
.myWork img:hover{
  box-shadow:   0 4px 4px rgba(0, 0, 0, .1),
                0 8px 8px rgba(0, 0, 0, .1),
                0 16px 16px rgba(0, 0, 0, .1),
                0 32px 32px rgba(0, 0, 0, .15),
                0 64px 64px rgba(0, 0, 0, .15);
  transition: box-shadow .3s ease-out;
}
.imageContainer {
  display:flex;
  -webkit-flex-flow:row wrap;
  align-items: center;
  padding:0;
  margin:0;
  justify-content: space-around;

}
.contact {
  height:75%;
  background-color:green;
  position: absolute;
  bottom:0;

}

Answer 1

不确定你是否需要.myWork绝对定位，如果你不需要，可以通过删除位置：绝对我认为它会解决你的问题。

你的问题从高处出现：.myWork的100％与position：absolute相结合。

挣扎于视差内容

1 个答案: