Question

我们如何获得不同宽度的响应高度相等的div标签？例如，如果屏幕为100％，则我需要80％成为一个div，其余的则为其他div，但它们的高度应相同。我尝试了很多插件，但没有用。我现在正在使用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>

Answer 1

在父元素上添加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时，他们总是一个孩子）

需要具有不同宽度的自适应等高div标签

1 个答案: