时间戳

首页 > 解决方案 > 如何使堆叠的多个div的宽度动态调整为其中最长的内容？

javascript - 如何使堆叠的多个div的宽度动态调整为其中最长的内容？

问题描述

我想让堆叠的多个 div 的宽度动态调整为最长的内容，如下所示： 目标渲染

我已经用谷歌搜索过了。inline-block建议。使用 bootstrap4，这是我的第一次尝试：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<style>
    div.cls{
        display: inline;
        margin: 5px;
    }
</style>
<div class="container">
    <div class="row justify-content-start">
        <div class="cls">
            <b>aaaaaaaaaaaaaaa</b>
        </div>
        <div class="cls">
            111
        </div>
    </div>
    <div class="row justify-content-start">
        <div class="cls">
            <b>bbb</b>
        </div>
        <div class="cls">
            222
        </div>
    </div>
    <div class="row justify-content-start">
        <div class="cls">
            <b>ccccc</b>
        </div>
        <div class="cls">
            33333333333
        </div>
    </div>
    <div class="row justify-content-start">
        <div class="cls">
            <b>dddddddddd</b>
        </div>
        <div class="cls">
           4 
        </div>
    </div>
</div>

遗憾的是，它不起作用：

在此处输入图像描述

所以我改变了主意。为什么不用flex-grid row来容纳 2 个堆叠的 div：abcs 和123s？

    <div class="row justify-content-start">
        <div>
            <div>
                <b>aaaaaaaaaaaaaaa</b>
            </div>
            <div>
                <b>bbb</b>
            </div>
        </div>
        <div>
            <div>
                111
            </div>
            <div>
                222
            </div>
        </div>
    </div>

实际上，它有效。 在此处输入图像描述

困扰我的是实施过程有点冗长且混乱。有没有更好的方法来实现目标？

希望得到您的帮助。:-)

标签： javascripthtmlcssbootstrap-4

解决方案

如评论所述，您需要一个表格布局：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >
<div class="d-table">
    <div class="d-table-row ">
        <div class="cls d-table-cell">
            <b>aaaaaaaaaaaaaaa</b>
        </div>
        <div class="cls d-table-cell">
            111
        </div>
    </div>
    <div class="d-table-row">
        <div class="cl d-table-cells">
            <b>bbb</b>
        </div>
        <div class="cls d-table-cell">
            222
        </div>
    </div>
    <div class="d-table-row">
        <div class="cls d-table-cell">
            <b>ccccc</b>
        </div>
        <div class="cls d-table-cell">
            33333333333
        </div>
    </div>
    <div class="d-table-row">
        <div class="cls d-table-cell">
            <b>dddddddddd</b>
        </div>
        <div class="cls d-table-cell">
           4 
        </div>
    </div>
</div>

推荐阅读