Как сделать блок одиинаковой высоты с другими блоками?
Я использую owl-carousel и мне нужно сделать так, чтобы все owl-item были одинаковый высоты, но один из блоков не поддается. Как прировнять его к высоты всех блоков, но чтобы он не опускался ниже картинок других блоков?
Весь код https://jsfiddle.net/p512awsm/
Сам сайт http://ilyin1ib.beget.tech/
$(".spaces-gal.owl-carousel").owlCarousel({
autoplay: true,
slideSpeed: 9000,
items: 3,
autoHeight: true,
loop: true,
nav: true,
navText: ["<i class='fas fa-chevron-left'></i>", "<i class='fas fa-chevron-right'></i>"],
center: true,
dots: false,
responsiveClass: true,
smartSpeed: 400,
margin: 30,
responsive: {
0: {
items: 1,
margin: 0,
dots: false,
nav: true
},
768: {}
}
});
.space-title {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 60px;
}
.space-title h3 {
font-family: 'Lora', serif;
font-weight: 700;
color: #10375c;
font-size: 40px;
}
.space-title p {
color: #9a9a9a;
font-size: 18px;
max-width: 452px;
width: 100%;
}
.space-title .plug {
background-color: red;
}
.space-slide.one {
height: 100%;
width: 100%;
}
.space-slide.two {
background-color: #10375c;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-height: 407px;
}
.space-slide.two h4 {
font-family: 'Lora', serif;
font-weight: 400;
font-size: 32px;
color: #fff;
}
.space-slide.two p {
color: #fff;
font-size: 18px;
max-width: 253px;
width: 100%;
}
<section class="spaces">
<div class="wrapper">
<div class="content">
<div class="space-title">
<h3>Our Spaces</h3>
<p>Our space is designed to give you a different experience when working with your team or personally</p>
<div class="plug">lorem</div>
</div>
<div class="spaces-gal owl-carousel">
<div class="space-slide one">
<img src="img/space-1.jpg" alt="1">
<span>Working with team</span>
</div>
<div class="space-slide two">
<h4>Private Space</h4>
<p>Comfortable space, Full speed wifi, Free coffe & Snack and many more</p>
</div>
<div class="space-slide three">
<img src="img/space-3.jpg" alt="3">
<span>Custom Office</span>
</div>
</div>
</div>
</div>
</section>
Ответы (1 шт):
Автор решения: EkaterinaRatatui
→ Ссылка
.owl-stage классу задайте флекс, тогда элементы выстроятся в одну высоту https://monosnap.com/file/UFo5wlZv4ikeuacVZSzTE0FOsW4y7l , а самому синему блоку https://monosnap.com/file/bnGcNYhTDK5JA1ZhCU40wYJTvhXlBI
