时间戳

首页 > 解决方案 > 如何消除图像和描述 div 之间的差距

html - 如何消除图像和描述 div 之间的差距

问题描述

在JSFiddle中，您可以看到图像底部和图像描述之间有几个 px 的间隙（带有...的大型游泳池）。我尝试消除边距和填充，但似乎没有任何点击。

我使用了来自谷歌的临时图片（因此幻灯片不会显示比第一张图片更多的图片）并且不用担心缩略图，我没有将图片链接到它们，因为没有必要能够观察问题。

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
  captionText.innerHTML = dots[slideIndex - 1].alt;
}
.temp-body {
  padding: 20px;
}


/* Position the image container (needed to position the left and right arrows) */

.container {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}


/* Hide the images by default */

.mySlides {
  display: none;
}


/* Add a pointer when hovering over the thumbnail images */

.cursor {
  cursor: pointer;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  padding: 10px;
  margin-top: -50px;
  color: white;
  background-color: #6DD5FA;
  font-size: 30px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  user-select: none;
  -webkit-user-select: none;
}


/* Position the "next button" to the right */

.next {
  right: 0;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* Container for image text */

.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard */
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Six columns side by side */

.column {
  float: left;
  width: 16.66%;
}


/* Add a transparency effect for thumnbail images */

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}
<div class="temp-body">
  <!-- Container for the image gallery -->
  <div class="container">

    <!-- Full-width images with number text -->
    <div class="mySlides">
      <div class="numbertext">1 / 12</div>
      <img src="https://cf.bstatic.com/images/hotel/max1024x768/187/187432560.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 12</div>
      <img src="Images/Apartments/Azalea/2.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 12</div>
      <img src="Images/Apartments/Azalea/3.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 12</div>
      <img src="Images/Apartments/Azalea/4.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">5 / 12</div>
      <img src="Images/Apartments/Azalea/5.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">6 / 12</div>
      <img src="Images/Apartments/Azalea/6.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">7 / 12</div>
      <img src="Images/Apartments/Azalea/7.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">8 / 12</div>
      <img src="Images/Apartments/Azalea/8.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">9 / 12</div>
      <img src="Images/Apartments/Azalea/9.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">10 / 12</div>
      <img src="Images/Apartments/Azalea/10.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">11 / 12</div>
      <img src="Images/Apartments/Azalea/11.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">12 / 12</div>
      <img src="Images/Apartments/Azalea/12.jpg" style="width:100%">
    </div>

    <!-- Next and previous buttons -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <!-- Image text -->
    <div class="caption-container">
      <p id="caption"></p>
    </div>

    <!-- Thumbnail images -->
    <div class="row">
      <div class="column">
        <img class="demo cursor" src="Images/Apartments/Azalea/1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Large Swimming Pool With Private Sun-Loungers">
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/Apartments/Azalea/2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Large Swimming Pool With Private Sun-Loungers">
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/Apartments/Azalea/3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Terrace With Superb Views">
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/Apartments/Azalea/4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Bright &amp; Modern Living Room">
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/Apartments/Azalea/5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Bright &amp; Modern Living Room">
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/Apartments/Azalea/6.jpg" style="width:100%" onclick="currentSlide(6)" alt="Spacious Open-Plan Dining Room">
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/Apartments/Azalea/7.jpg" style="width:100%" onclick="currentSlide(7)" alt="Master Bedroom with En-Suite Bathroom">
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/Apartments/Azalea/8.jpg" style="width:100%" onclick="currentSlide(8)" alt="Master Bedroom with En-Suite Bathroom">
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/Apartments/Azalea/9.jpg" style="width:100%" onclick="currentSlide(9)" alt="2nd Bedroom">
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/Apartments/Azalea/10.jpg" style="width:100%" onclick="currentSlide(10)" alt="Fully-Equipped Kitchen">
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/Apartments/Azalea/11.jpg" style="width:100%" onclick="currentSlide(11)" alt="Main Bathroom with Shower">
      </div>
      <div class="column">
        <img class="demo cursor" src="Images/Apartments/Azalea/12.jpg" style="width:100%" onclick="currentSlide(12)" alt="En-Suite Bathroom with Bath">
      </div>
    </div>
  </div>

标签： htmlcsslayoutpaddingmargin

解决方案

推荐阅读