如何对齐两个框，一个在另一个具有相同大小的顶部

Question

我正在尝试使用 bootstrap flex 和 grid 类对齐下面代码中显示的两个框，但不知何故它们都有不同的宽度。

我尝试将两者的宽度设置为 width=200px;看看发生了什么，弹性项目失去了位置。

<!-- total income -->
                <div class="container">
                    <div class="budget__income d-flex justify-content-center mb-2">
                        <div class="row d-flex justify-content-center col-xs-1">
                            <div class="budget__income--text py-3">
                                <strong>Ingresos</strong>
                            </div>
                            <div class="budget__income--value py-3">
                                + 4,300 </div>
                            <div class="buget__income--percentage py-3 pl-2 align-self-center ">
                                34%
                            </div>
                        </div>
                    </div>
                    <!-- total expense -->
                    <div class="budget__expense d-flex justify-content-center">
                        <div class="row d-flex justify-content-center col-xs-1">
                            <div class="budget__expense--text py-3">
                                <strong>Gastos</strong>
                            </div>
                            <div class="budget__expense--value py-3">
                                + 4,300 </div>
                            <div class="buget__expense--percentage py-3 pl-2 align-self-center ">
                                22%
                            </div>
                        </div>
                    </div>
                </div>

我希望两个指定的框都水平对齐，并且都具有相同的宽度。

非常感谢，

Answer 1

尝试使用表格、表格行和表格单元格显示。喜欢：

<div style="display: table">
  <div style="display: table-row">
    <div style="display: table-cell">
      content1
    </div>
  </div>
  <div style="display: table-row">
    <div style="display: table-cell">
      content2
    </div>
  </div>
</div>