Я создал новостной слайдер для нашей веб-страницы, используя карусель. Каждый слайд в карусели содержит рисунок (все отдельные рисунки имеют одинаковую ширину), заголовок и текст с индивидуальной длиной. В настоящее время я пытаюсь сделать так, чтобы все слайды автоматически имели одинаковый размер в зависимости от объема текста. Я вроде как добавляю пару пустых строк в поля меньшего размера, однако это сильно зависит от масштаба используемой открытой страницы / устройства и не является разумным решением. Я надеялся, что, возможно, у кого-то может быть идея, как решить эту проблему, поскольку я действительно новичок в html.
Код внутри основного документа:
<section class="carousel">
<div class="reel">
<!-- Beginning -->
<article> <a class="twitter-timeline" data-height="420" href="TwitterLink"
target="_blank"> Tweets by Name</a>
<script async="" src="TwitterLink" charset="utf-8"></script>
</article>
<article> <a href="" class="image featured"><img src="images/News/ImageName.png"></a>
<header>
<h3>Some random header</h3>
</header>
<p align="justify">some random text<br>
</p>
</article>
</div>
</section>
и выдержка из файла css
.carousel {
position: relative;
overflow: hidden;
padding: 2em 0 2em 0;
margin-top: 0;
}
.carousel .reel {
white-space: nowrap;
position: relative;
-webkit-overflow-scrolling: touch;
padding: 0 2em 0 2em;
}
.carousel article {
display: inline-block;
width: 18em;
background: #fff;
text-align: center;
padding: 0 1em 3em 1em;
margin: 0 2em 0 0;
white-space: normal;
opacity: 1.0;
height: auto;
-moz-transition: opacity 0.75s ease-in-out;
-webkit-transition: opacity 0.75s ease-in-out;
-ms-transition: opacity 0.75s ease-in-out;
transition: opacity 0.75s ease-in-out;
}
Заранее спасибо за любую помощь! Чао, Лузия