Question

我正在尝试制作一个不同高度的“幻灯片”内容标签！无论如何使用css使它们的高度相等？这是我目前的代码：

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  slideIndex += n;
  showSlides(slideIndex);
}

function currentSlide(n) {
  slideIndex = n;
  showSlides(slideIndex);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("contents");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].classList.remove("active");
    slides[i].classList.remove("active-content");
  }
  slides[slideIndex - 1].classList.add("active-content");
  dots[slideIndex - 1].classList.add("active");
}

.contents {
  display: none;
  text-align: center;
}

.contents.active-content {
  display: block;
}

.content-container {
  position: relative;
  margin: auto;
}

.prev,
.next {
  cursor: pointer;
  position: inline-block;
  padding: 8px;
  margin-top: -22px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 3px 3px 3px 3px;
}

.prev:hover,
.next:hover {
  color: white;
  background-color: rgba(0, 0, 0, 0.8);
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}

<body>
  <div class="content-container">
    <div class="contents fade">
      <h3>blah blah</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
    <div class="contents fade">
      <h3>blah blah</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
    <div class="contents fade">
      <h3>blah blah</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
  <br>
  <div style="text-align:center; direction: ltr">
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
</body>

我尝试了flex展示，但我猜它没有用，因为它的子块没有显示！并且使用可见性也不起作用！还尝试了一些其他选项，如table / table-cell，但没有运气！任何类型的信息将不胜感激！ THX;）

Answer 1

我认为在将你选择的高度放在contents级别之后'对所有人来说都是一样的。

.contents {
  display: none;
  text-align: center;
  height: 120px;
}

Answer 2

如果您希望动态高度为div，请根据您的内容。那么javascript魔术可以帮助你。

＆＃13;

var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
    slideIndex += n;
  showSlides(slideIndex);
}
function currentSlide(n) {
    slideIndex = n;
  showSlides(slideIndex);
}
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("contents");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < dots.length; i++) {
      dots[i].classList.remove("active");
      slides[i].classList.remove("active-content");
  }
  slides[slideIndex-1].classList.add("active-content");
  dots[slideIndex-1].classList.add("active");
}

function setheight() {
  var content = [].slice.call(document.querySelectorAll(".contents"));
  var contents = content.sort(function(a, b) {
     return a.clientHeight < b.clientHeight
  });
  document.querySelector("#content-container").style.height = contents[0].clientHeight+"px";
}

setheight();

＆＃13;

.contents {
 visibility: hidden;
  text-align: center;
  position: absolute;
  top:0;
  left:0;
}
.contents.active-content {
   visibility: visible;
}
.content-container {
  position: relative;
  margin: auto;
}
.prev, .next {
  cursor: pointer;
  position: inline-block;
  padding: 8px;
  margin-top: -22px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 3px 3px 3px 3px;
}
.prev:hover, .next:hover {
  color: white;
  background-color: rgba(0,0,0,0.8);
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {
  background-color: #717171;
}

＆＃13;

<body>
<div class="content-container" id="content-container">
<div class="contents fade">
    <h3>blah blah</h3>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
<div class="contents fade">
  <h3>blah blah</h3>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
<div class="contents fade">
  <h3>blah blah</h3>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
</div>
<br>
<div style="text-align:center; direction: ltr">
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
</body>

＆＃13;

Answer 3

尝试为内容类定义最小和最大高度，然后使用溢出来管理长文本

.contents {
  display: none;
  text-align: center;
  min-height:200px;
  max-height:200px;
  overflow:auto;
}

标签内容具有相同的高度

3 个答案: