Если вы предпочитаете решение Javascript, вы можете использовать это:
ерирую таблицу (с vue.js) из объекта, который должен иметь ширину в два столбца. Каждый из столбцов происходит от ключа и значения объекта. Это эквивалентно следующему фактическому HTML:
<div id="table">
<div>
<div>
this is something long on the first row
</div>
<div>
short 1st row
</div>
</div>
<div>
<div>
wazaa 2nd row
</div>
<div>
wazii 2nd row
</div>
</div>
</div>
Я использую сетку CSS для форматированияdiv
в сетку 2x2, которую я ожидал
this is something long on the first row | short 1st row
wazaa 2nd row | wazii 2nd row
Код для этого:
#table {
display: grid;
grid-template-columns: auto 1fr;
}
<div id="table">
<div>
<div>
this is something long on the first row
</div>
<div>
short 1st row
</div>
</div>
<div>
<div>
wazaa 2nd row
</div>
<div>
wazii 2nd row
</div>
</div>
</div>
Результат не тот, который я ожидаю: два самых глубокихdiv
вести себя как они должны за пределамиgrid
дисплей: они накладываются друг на друга.
Я хотел, чтобы они унаследовали поведение сетки: выровнять на основе шаблонов столбцов, как они идут. Как этого добиться?