我正在尝试制作具有不同高度的“类似幻灯片”的内容标签! 有没有办法使用 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)">❮</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)">❯</a>
</div>
</body>我尝试了 flex display，但我猜它没有工作，因为它的子项被阻止并且没有显示!而且使用可见性也不起作用! 还尝试了一些其他选项，如 table/table-cell，但没有成功! 任何类型的信息将不胜感激!谢谢;)
最佳答案
我认为在将您选择的高度放入 contents 后，所有类的高度都将相同。
.contents {
display: none;
text-align: center;
height: 120px;
}
关于javascript - 具有相同高度的选项卡内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50000996/