Question

在单列CSS网格中，我有一个div，该js幻灯片位于第二个div上方。当我按比例缩小站点时，这两个div相互拉开。我希望能够在两个div之间保持恒定的距离，但是无法正常工作。有问题的div类是“幻灯片”和“中心文本”。

谢谢您的帮助。

这是HTML

<html>
  <head>
    <title></title>  
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html"; charset="utf-8" />
    <meta name="created" content="Fri, 22 Jan 2016 17:43:40 GMT" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="jvs_style.css" rel="stylesheet" type="text/css" />


</head>
  <body>

<div id="wrap">

<div class="maingrid">

<div class="slides">
    <img src="http://tests.markgarvey.com/slideshow_images/out1.png" max-width:100%;>
    <img src="http://tests.markgarvey.com/slideshow_images/out2.png" max-width:100%;>
    <img src="http://tests.markgarvey.com/slideshow_images/out3.png">
    <img src="http://tests.markgarvey.com/slideshow_images/out4.png">
    <img src="http://tests.markgarvey.com/slideshow_images/out5.png">
    <img src="http://tests.markgarvey.com/slideshow_images/out6.png">  
    <img src="http://tests.markgarvey.com/slideshow_images/out7.png">
    <img src="http://tests.markgarvey.com/slideshow_images/out8.png">
    <img src="http://tests.markgarvey.com/slideshow_images/out9.png">
    <img src="http://tests.markgarvey.com/slideshow_images/out10.png">
  </div><!-- end of slides div --> 

<div class="centertext">
    <img src="http://tests.markgarvey.com/images/JVSA_weblogo3.png" width="281" height="106" alt="" title="" border="0" />
    <p class="name">FIRSTNAME LASTNAME</p>
    <p class="address">1234 Example Street<br>
    Princeton, New Jersey 12345<br>
    testing@email.net<br>
    505.422.6563</p>
    <p>Solemnly he came forward and mounted the round gunrest. He faced about and blessed gravely thrice the tower, the surrounding country and the awaking mountains. Then, catching sight of Stephen Dedalus, he bent towards him and made rapid crosses in the air, gurgling in his throat and shaking his head. Stephen Dedalus, displeased and sleepy, leaned his arms on the top of the staircase and looked coldly at the shaking gurgling face that blessed him, equine in its length, and at the light untonsured hair, grained and hued like pale oak.
    </p>

  </div><!-- end of centertext div -->  

</div><!-- end of maingrid div -->  

</div><!-- end of wrap div -->  


<script>
function nextSlide() {
    var q = function(sel) { return document.querySelector(sel); }   
    q(".slides").appendChild(q(".slides img:first-child"));
}
setInterval(nextSlide, 5000)
</script>

  </body>
</html>

这是CSS

#wrap {
      max-width:100%;
      width:1000px;
      background:#FFF;
      margin: 0 auto;
}

.maingrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  margin-top:50px;
}

.centertext {
  align-self: center;
  justify-self: center;
  margin-top:20px;
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  text-align:left;
  letter-spacing: normal;
  line-height: 19px;
  padding-bottom: 5px;
  font-family: Verdana, Arial, sans-serif;
  color:#000000;
  font-size:1em;
  line-height: 20px; 
}


img {
    max-width: 100%;
    height: auto;
}   


.name {
    font-size:1.5em;
    font-weight:bold;
    font-variant:small-caps;
    margin-bottom: 5px; 
}

.address {
    margin-top: 8px;
    line-height: 24px;
    font-family: Arial, sans-serif;
    color:#000000;
    font-size:1em;
    line-height: 19px; 
}

/* the slide container with a fixed size */
.slides {
  width:100%;
  max-width: 1000px;
  height: 670px;
  position: relative;
}

/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img { 
  height: auto;
  display: block;
  position: absolute; 
  transition: opacity 1s;
  opacity: 0;
  width:100%;
  max-width: 1000px;
  margin-bottom:60px;
}

/* the first image is the current slide. it's faded in. */
.slides img:first-child { 
  z-index: 2; /* frontmost */
  opacity: 1;
}

/* the last image is the previous slide. it's behind the current slide and it's faded over. */
.slides img:last-child {
  z-index: 1; /* behind current slide */
  opacity: 1;
}

Answer 1

问题在于.slides div上的固定高度。当您放大可见图像的宽度时，不允许页面宽度溢出，因此最终.slides div底部包含大量空白。

可以通过更改来固定

.slides img { 
  ...
  width:100%;
  max-width: 1000px;
  ...
}

到

.slides img { 
  ...
  width: 1000px;
  ...
}

假设这不会影响其他行为（对我来说，在CodePen演示版的chrome中看起来不错）

缩小时DIV会分开

1 个答案: