个人中心
gpt4 book ai didi

javascript - 需要具有不同宽度的响应式等高 div 标签

转载 作者：行者123 更新时间：2023-11-28 00:48:16 25 4
gpt4 key购买 nike

我们如何获得具有不同宽度的响应式等高 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>

最佳答案

在父元素上添加 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>
(...)

这种方法的缺点是您需要使用媒体查询在较小的屏幕上将一个 child 放在另一个 child 的下方(使用 display: flex 它们总是一个挨着另一个)

关于javascript - 需要具有不同宽度的响应式等高 div 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53408120/

25 4 0
文章推荐： javascript - 如何使用 javascript 获取服务器上的站点 URL
文章推荐： html - iFrame src 中的 HSTS
文章推荐： javascript - 电子表格中的单一动态模态/JS 概览(而不是每个单元格)
文章推荐： css - 如何在 Angular JS 中更改 SVG 的颜色