首页 / 技术问答 / Html问答列表 / 问答详情

Html W3Schools 幻灯片相同高度

我在W3School修改后的幻灯片中添加了文本.我现在的问题是，文本div的高度不相等.我希望文本div像3张幻灯片中最大的文本div一样大，我不想为文本div设置特定的高度，因为这会使响应很难管理(这意味着媒体查询的大量工作，甚至不是here%完美的).我浏览了许多关于同一话题的帖子，但我想不出一个解决方案.代码低于或为here.感谢任何人的帮助.

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("dot");
  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";
}
@import url('https://fonts.googleapis.com/css2?family=Assistant&display=swap');
@import url("https://use.typekit.net/yoj6eqg.css");

* {box-sizing: border-box}
body {
  font-family: Assistant, sans-serif;
  margin: 0;
}

/* Slideshow container */
.slideshow-container {
  display: flex;
  position: relative;
  background: #f1f1f1f1;
  width: 100%;
  margin: auto;
}

/* Slides */
.mySlides {
  display: flex;
  position: relative;
  padding: 30px 0px 30px 0px;
  text-align: center;
  width: 92%;
  max-width: 1200px;
  margin: auto;
  }
  
  /* text color */
.text {
  color: #333333;
  text-align: left;
  font-family: "Assistant", sans-serif;
  font-style: normal;
  font-weight: 400;
  padding: 1vh 0 0 0;
  flex-grow: 1;
}

.heading {
  text-align: center;
  color: #90bd49;
  font-size: 30px;
  font-family: "p22-underground", sans-serif;
  font-weight: 600;
  font-style: normal;
  padding: 10px;
  padding: 1.5vh 0 0 0;
}

/* Prev Button Position and Properties */
.prev {
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: -5.9%;
  transform: translateY(-50%); 
  padding: 30px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 3px 0 0 3px;
  user-select: none;
}

/* Next Button Position and Properties */
.next {
  position: absolute;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  top: 50%;
  right: -5.9%;
  transform: translateY(-50%);
  padding: 30px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  user-select: none;
}

/* 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);
  color: white;
}
.image
{
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 60vh;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 20px;
    background: #ddd;
}

/* The dots/bullets/indicators */
.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;
}

/* Add a background color to the active dot/circle */
.dot:hover {
  background-color: #90bd49;
}
.active {
  background-color: #90bd49;
}

@media screen and (max-width:767px) {
  .heading {
    font-size: calc(22px + 0.390625vw);
  }

  .text {
    font-size: calc(14px + 0.390625vw);
    padding: 1vh 3vw 0 3vw;
  }

  .prev {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }
  .next {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }

  .mySlides {
    display: none;
    width: 100%;
    padding: 30px 0px 30px 0px;
  }
  .image {
    height: 350px;
  }
}

@media (min-width:768px) and (max-width:1200px) {
  .heading {
    font-size: calc(20px + 0.390625vw);
  }

  .text {
    font-size: calc(12px + 0.390625vw);
    padding: 1vh 2vw 0 2vw;
  }

  .prev {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }
  .next {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }

  .mySlides {
    display: none;
    width: 92%;
    max-width: 1200px;
    padding: 30px 0px 30px 0px;
  }
}

@media (min-width:1201px) and (max-width:1300px) {
  .heading {
    font-size: calc(18px + 0.390625vw);
  }

  .text {
    font-size: calc(10px + 0.390625vw);
    padding: 1vh 2.5vw 0 2.5vw;
  }

  .prev {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }
  .next {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }

  .mySlides {
    display: none;
    width: 92%;
    max-width: 1200px;
    padding: 30px 0px 30px 0px;
  }
}

@media (min-width:1301px) and (max-width:1650px) {
  .heading {
    font-size: calc(18px + 0.390625vw);
  }

  .text {
    font-size: calc(10px + 0.390625vw);
  }
}

@media (min-width: 1651px){
.heading {
  font-size: calc(16px + 0.390625vw);
}
.text {
  font-size: calc(8px + 0.390625vw);
}

}
<div class="slideshow-container">
<div class="mySlides">
<div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image">  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a></div>
<div class="heading">Lorem ipsum</div>
<div class="text">But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.</div>
</div>
<div class="mySlides">
<div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image">  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a></div>
<div class="heading">Lorem ipsum</div>
<div class="text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
</div>
<div class="mySlides">
<div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image">  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a></div>
<div class="heading">Lorem ipsum</div>
<div class="text">But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated</div>
</div>
</div>
<div class="dot-container">
<div class="dot" onclick="currentSlide(1)"></div>
<div class="dot" onclick="currentSlide(2)"></div>
<div class="dot" onclick="currentSlide(3)"></div>
</div>

推荐答案

您要更改display属性，因此需要将容器设置为等于幻灯片最大高度的高度.

window.onload = setSliderHeight;
window.onresize = setSliderHeight;

function setSliderHeight() {
  let maxSlideHeight = 0;
  const container = document.querySelector('.slideshow-container');
  container.style.removeProperty('height');
  document.querySelectorAll('.mySlides').forEach(el => maxSlideHeight = el.offsetHeight > maxSlideHeight ? el.offsetHeight : maxSlideHeight);
  container.style.height = maxSlideHeight + 'px';
}

/* your code is below */

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("dot");
  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";
}
@import url('https://fonts.googleapis.com/css2?family=Assistant&display=swap');
@import url("https://use.typekit.net/yoj6eqg.css");

* {box-sizing: border-box}
body {
  font-family: Assistant, sans-serif;
  margin: 0;
}

/* Slideshow container */
.slideshow-container {
  display: flex;
  position: relative;
  background: #f1f1f1f1;
  width: 100%;
  margin: auto;
}

/* Slides */
.mySlides {
  display: flex;
  position: relative;
  padding: 30px 0px 30px 0px;
  text-align: center;
  width: 92%;
  max-width: 1200px;
  /* changed */
  margin: 0 auto;
  }
  
  /* text color */
.text {
  color: #333333;
  text-align: left;
  font-family: "Assistant", sans-serif;
  font-style: normal;
  font-weight: 400;
  padding: 1vh 0 0 0;
  flex-grow: 1;
}

.heading {
  text-align: center;
  color: #90bd49;
  font-size: 30px;
  font-family: "p22-underground", sans-serif;
  font-weight: 600;
  font-style: normal;
  padding: 10px;
  padding: 1.5vh 0 0 0;
}

/* Prev Button Position and Properties */
.prev {
  position: absolute;
  cursor: pointer;
  top: 50%;
  left: -5.9%;
  transform: translateY(-50%); 
  padding: 30px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 3px 0 0 3px;
  user-select: none;
}

/* Next Button Position and Properties */
.next {
  position: absolute;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  top: 50%;
  right: -5.9%;
  transform: translateY(-50%);
  padding: 30px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  user-select: none;
}

/* 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);
  color: white;
}
.image
{
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 60vh;
}

/* The dot/bullet/indicator container */
.dot-container {
    text-align: center;
    padding: 20px;
    background: #ddd;
}

/* The dots/bullets/indicators */
.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;
}

/* Add a background color to the active dot/circle */
.dot:hover {
  background-color: #90bd49;
}
.active {
  background-color: #90bd49;
}

@media screen and (max-width:767px) {
  .heading {
    font-size: calc(22px + 0.390625vw);
  }

  .text {
    font-size: calc(14px + 0.390625vw);
    padding: 1vh 3vw 0 3vw;
  }

  .prev {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }
  .next {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }

  .mySlides {
    display: none;
    width: 100%;
    padding: 30px 0px 30px 0px;
  }
  .image {
    height: 350px;
  }
}

@media (min-width:768px) and (max-width:1200px) {
  .heading {
    font-size: calc(20px + 0.390625vw);
  }

  .text {
    font-size: calc(12px + 0.390625vw);
    padding: 1vh 2vw 0 2vw;
  }

  .prev {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }
  .next {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }

  .mySlides {
    display: none;
    width: 92%;
    max-width: 1200px;
    padding: 30px 0px 30px 0px;
  }
}

@media (min-width:1201px) and (max-width:1300px) {
  .heading {
    font-size: calc(18px + 0.390625vw);
  }

  .text {
    font-size: calc(10px + 0.390625vw);
    padding: 1vh 2.5vw 0 2.5vw;
  }

  .prev {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }
  .next {
    font-size: 15px;
    border-radius: 0 0 0 0;
    padding: 20px;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
  }

  .mySlides {
    display: none;
    width: 92%;
    max-width: 1200px;
    padding: 30px 0px 30px 0px;
  }
}

@media (min-width:1301px) and (max-width:1650px) {
  .heading {
    font-size: calc(18px + 0.390625vw);
  }

  .text {
    font-size: calc(10px + 0.390625vw);
  }
}

@media (min-width: 1651px){
.heading {
  font-size: calc(16px + 0.390625vw);
}
.text {
  font-size: calc(8px + 0.390625vw);
}

}
<div class="slideshow-container">
<div class="mySlides">
<div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image">  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a></div>
<div class="heading">Lorem ipsum</div>
<div class="text">But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.</div>
</div>
<div class="mySlides">
<div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image">  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a></div>
<div class="heading">Lorem ipsum</div>
<div class="text">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</div>
</div>
<div class="mySlides">
<div style="background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class="image">  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a></div>
<div class="heading">Lorem ipsum</div>
<div class="text">But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated.But man is not made for defeat. A man can be destroyed but not defeated</div>
</div>
</div>
<div class="dot-container">
<div class="dot" onclick="currentSlide(1)"></div>
<div class="dot" onclick="currentSlide(2)"></div>
<div class="dot" onclick="currentSlide(3)"></div>
</div>

Html相关问答推荐

动态FormControl值在Angular 上绑定错误的问题

如何从卷轴中排除粘性元素？

创建带有弯曲边框的水平时间线

更改垫子输入的涟漪 colored颜色

图像不在HTML文件中显示

如何创建带有粘性列和标题的网格？

如何制作带有粘性头和脚的可滚动车身

如何使用*ngFor将模板从父级传递到子级

如果您将带有 html 标签的字符串数据(name ： test) 放在 `

如何将图像放在其内部按钮下方

如何使元素具有粘性

如何为高度较小的块制作边框动画？

停止 Bootstrap 5 输入调整 CSS 网格单元的高度

如何清除html输入中的文本

将 div 放在图片旁边而不是下方

如何将第一个 p 标签放在其下方第二个 p 标签的中间

使用 golem 框架在shiny 的应用程序中存储背景图片的位置

无法使用 HTML 中的 Bootstrap 自上而下居中

如何向上移动图像并溢出图像的一部分而另一部分不溢出

AWS SES：如何正确使用 CSS

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630