Question

我正在创建一个切片滑块，用于教育目的，以尝试响应式设计。

我已经尝试了3天才能使其响应，但我尝试的一切都没有用。

每当有人在页面背景上盘旋时，隐藏的div将会显示内部有4张图片。当我放大时，最后一张图像正在改变位置。

这是我的代码：

<div class="container">
   <div class="reveal unreveal">
    <div  class="caption">
     <div class="contContainer">
      <div class="imgContainer">
       <img src="css/image1.png" />
      </div>
      <div class="imgContainer">
       <img src="css/image2.png" />
      </div>
      <div class="imgContainer">
       <img src="css/image3.png" />
      </div>
      <div class="imgContainer2">
       <img class="yoloimg" src="css/image4.png" />
      </div>
    </div>
   </div>
 </div>
</div>

CSS：

body {
  background: #222;
  max-width:100%;
  min-width:80%;
}
.contContainer {
width:90%;
padding:5px;
margin:0 auto;
}
.imgContainer {
width:20%;
padding:0px;
margin:0 auto;
text-align:center;
position:relative;
float:left;
margin-left:5px;

}
.imgContainer2 {
width:38%;
padding:0px;
margin:0 auto;
text-align:center;
position:relative;
float:left;
}
.yoloimg {
width:94%;
height:auto;
}
.imgContainer img {
width:96.8%;
height:auto;

}
.unreveal {

  background: url("ayo_bottom.png") 0px 278px, url("ayo_top.png") 0px 0px, #ffffff;
  background-repeat: no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  background-size:contain;
  transition: background-position 0.3s ease;
}

 .unreveal:hover {
   background-repeat: no-repeat;
  -webkit-transition: background-position 0.3s ease;
  -moz-transition: background-position 0.3s ease;
  transition: background-position 0.3s ease;
  background: url("ayo_bottom.png") 0px 500px, url("ayo_top.png") 0px -50px, #ffffff;
  background-repeat: no-repeat;
  background-size:contain;
}

.reveal {
  max-width:1100px !important;
  width:100%;
  height:auto;
  min-height:800px;
  float: left;
  margin:0 auto;
}

div.caption {
        top: 32%; 
        max-width:1100px;
        position: absolute;
        margin:0 auto;
        display:none;
    background:#2b2a28;

}

我使用Skeleton 2.0.4（也使用了Bootstrap，但没有发生任何事情）。我认为问题是我在.unreveal课时使用2张图片作为背景，但我不知道还有什么需要做的。我使用了max-width:everywhere, margin:0 auto，我从骨架中获得了媒体查询。

如果有人愿意瞥一眼，我上传了它： test-site。

提前致谢。

编辑：修复图像重新定位后，容器仍然存在问题。当我放大时，高度在2400px停止 img of what happening。我在容器和身体上使用max-height:1100px但是做得很好。我使用了不同的doctypes也没有结果。

Answer 1

您看到的问题是您的％widths：

.imgContainer {
  width: 20%;
  padding: 0px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  float: left;
  margin-left: 5px;
}

当你达到765px宽时，你得到20％（153px计算）加上5px左边距：158 x 3 = 474

你imgContainer2的宽度为38％，当你处于765px并将其强制推到下一行时它会将其推过。要么完全摆脱边缘左边，要么为765px编写媒体查询：

@media screen and (max-width: 765px) {
    .imgContainer {
        margin-left: 0;
    }
}

如果你玩这些尺寸，你会看到跳到下一行的确切地发生在765px。宽度为766px，看起来不错。作为一般规则，在处理％width时，您希望远离像素边距和填充。在调整屏幕大小时，您将在某些时候遇到问题。

响应问题制作切片滑块

1 个答案: