Как я могу выровнять оба блока, один поверх другого, имеющих одинаковый размер - PullRequest
Новая
       18

Как я могу выровнять оба блока, один поверх другого, имеющих одинаковый размер

0 голосов
/ 01 апреля 2019

Я пытаюсь выровнять оба поля, показанные в коде ниже, используя классы начальной загрузки flex и grid, но так или иначе оба имеют разную ширину.

Я попытался установить ширину обоих в ширину = 200 пикселей;чтобы увидеть, что произошло, и гибкие элементы потеряли положение. 

<!-- 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>

Я ожидаю, что оба указанных прямоугольника будут выровнены по горизонтали, и оба будут иметь одинаковую ширину.

Большое спасибо,

1 Ответ

0 голосов
/ 01 апреля 2019

попробуй с отображением таблицы, строки таблицы и ячейки таблицы.Нравится: 

<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>
...