Нужны гибкие теги div одинаковой высоты с разной шириной - PullRequest
Новая
       1

Нужны гибкие теги div одинаковой высоты с разной шириной

0 голосов
/ 21 ноября 2018

Как мы можем получить отзывчивый тег div одинаковой высоты с различной шириной?Например, если экран 100%, мне нужно, чтобы 80% было одним делением, а оставшимся другим делением, но их высота должна быть одинаковой.Я пробовал так много плагинов, но бесполезно.Я использую bootstrap4 сейчас .?

Пожалуйста, найдите образец HTML-файла, который я использую. 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>equal height</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-9 col-sm-12 col-lg-9 col-xs-12" style="background-color:darkseagreen">
                <h2>equal height</h2>
                <h2>equal height</h2>
                <h2>equal height</h2>

            </div>
            <div class="col-md-3 col-sm-12 col-lg-3 col-xs-12" style="background-color:lightyellow">

                <h2>equal height</h2>

            </div>
        </div>
    </div>
</body>
</html>

1 Ответ

0 голосов
/ 21 ноября 2018

В родительский элемент добавьте display: flex и align-items: stretch. 

(...)
    <div class="row">
            <div class="col-md-12" style="display: flex; align-items: stretch;">
                <div class="col-md-9 col-sm-12 col-lg-9 col-xs-12" style="background-color:darkseagreen">
                    <h2>equal height</h2>
(...)

Недостатком этого подхода является то, что вам потребуется использовать медиазапросы, чтобы поместить одного дочернего элемента ниже другого на меньших экранах (сdisplay: flex они всегда будут друг за другом)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...