Столбцы равной высоты или высота столбца будут основываться на самом длинном столбце среди них.

У меня есть несколько контейнеров разной длины из-за количества текста в каждом контейнере, и я пытаюсь сделать так, чтобы все контейнеры имели одинаковый размер. Когда экран меньше, все контейнеры должны быть одинаковыми, я пытался изменить ширину, и это не сработало, так как мне этого добиться?

Вот мой код:

/* Tours boxes*/
.tour_container {
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    margin: 0;
    margin-bottom: 30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    position: relative;
}

.tour_container:hover {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);  
}

.list_carousel .tour_container {
    position: static;
}

.img_container {
    position: relative;
    overflow: hidden;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tour_container .tour_title {
    padding: 15px 15px 10px 15px;
}
<div class="container margin_60">
    <div class="main_title">
        <h2>Your <span>Friendly Self-Service</span> Tour Guide</h2>
        <p>Discover Heritages</p>
    </div>
    <div class="owl-carousel owl-theme list_carousel add_bottom_30">
        <div class="item">
            <div class="tour_container">
                <div class="img_container">
                    <a href="single_tour.html">
                        <img src="img/" width="800" height="533" class="img-fluid" alt="image">
                    </a>
                </div>
                <div class="tour_title">
                    <h3><strong>Trail Name</strong></h3>
                    <p>Trail Description</p>
                </div>
            </div>
            <!-- End box tour -->
        </div>
        <!-- /item -->
        <div class="item">
            <div class="tour_container">
                <div class="img_container">
                    <a href="single_tour.html">
                        <img src="img/" width="800" height="533" class="img-fluid" alt="image">
                    </a>
                </div>
                <div class="tour_title">
                    <h3><strong>Trail Name</strong></h3>
                    <p>Trail Description</p>
                </div>
            </div>
            <!-- End box tour -->
        </div>
        <!-- /item -->
        <div class="item">
            <div class="tour_container">
                <div class="img_container">
                    <a href="single_tour.html">
                        <img src="img/" width="800" height="533" class="img-fluid" alt="image">
                    </a>
                </div>
                <div class="tour_title">
                    <h3><strong>Trail Name</strong></h3>
                    <p>Trail Description</p>
                </div>
            </div>
            <!-- End box tour -->
        </div>
        <!-- /item -->
        <div class="item">
            <div class="tour_container">
                <div class="img_container">
                    <a href="single_tour.html">
                        <img src="img/" width="800" height="533" class="img-fluid" alt="image">
                    </a>
                </div>
                <div class="tour_title">
                    <h3><strong>Trail Name</strong></h3>
                    <p>Trail Description</p>
                </div>
            </div>
            <!-- End box tour -->
        </div>
    </div>
    <!-- /carousel -->
</div>
<hr>
<!-- End container -->
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
19
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете добавить приведенный ниже CSS в свой файл стиля. Это решит вашу проблему.

.owl-carousel .owl-stage{
    display: flex;
}
.item {
    display: flex;
    flex: 1 0 auto;
    height: 100%;
}
.tour_container {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

Другие вопросы по теме