如何對齊兩個盒子，一個在另一個具有相同大小的頂部

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>