содержимое вкладки с одинаковой высотой - PullRequest
Новая
       9

содержимое вкладки с одинаковой высотой

0 голосов
/ 24 апреля 2018

Я пытаюсь сделать «слайд-шоу» вкладок с различной высотой! Есть ли способ сделать их равными по высоте с помощью 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 display, но я думаю, что он не работал из-за блокировки и отсутствия отображения дочернего элемента! И использование видимости тоже не сработало! Также пробовал некоторые другие варианты, такие как table / table-cell, но не повезло! любая информация будет оценена! THX;)

Ответы [ 4 ]

0 голосов
/ 11 мая 2018

Вы можете попытаться получить высоту всех слайдов, используя js или jquery, и с помощью цикла сравните его и возьмите самое высокое, затем установите самую высокую высоту для всех элементов с помощью цикла.

0 голосов
/ 24 апреля 2018

попробуйте определить минимальную и максимальную высоту для вашего класса содержимого, а затем переполнение для управления длинными текстами 

.contents {
  display: none;
  text-align: center;
  min-height:200px;
  max-height:200px;
  overflow:auto;
}
0 голосов
/ 24 апреля 2018

, если вы хотите динамическую высоту div в соответствии с вашим контентом.тогда волшебство javascript может помочь вам. 

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();
.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;
}
<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>
0 голосов
/ 24 апреля 2018

Думаю, после помещения высоты по вашему выбору в contents высота класса будет одинаковой для всех. 

.contents {
  display: none;
  text-align: center;
  height: 120px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...