Столбцы в другой таблице той же ширины

Изображение, чтобы лучше объяснить проблему.

Я пытаюсь сделать столбцы во втором разделе такими же, как в первом. До сих пор я добивался этого, добавляя 13% отступов к левой и правой сторонам раздела и устанавливая правильную ширину в процентах для каждого столбца, хотя у меня были проблемы с этим, потому что он автоматически устанавливал неправильные проценты для заполнить 100% раздела.

Содержимое находится в «информационном ящике».

Если я не установлю отступы в разделе, это будет выглядеть так:

Я знаю, что должен быть лучший способ достичь того же результата. Есть идеи?

🤔 А знаете ли вы, что...
HTML может вставлять изображения, аудио и видео на веб-страницы с помощью соответствующих тегов.


50
2

Ответы:

Решено

.container {
  display: flex;
  width: 80vw;
  margin: 0 auto;
  justify-content: space-between;
  border: solid 1px green;
  text-align: center;
}

.full {
  border: solid 1px red;
  width: 100%;
}

.half {
  border: solid 1px blue;
  width: 50%;
}
<div class='container'>
  <div class='full'>1</div>
  <div class='full'>2</div>
  <div class='full'>3</div>
  <div class='full'>4</div>
</div>

<div class='container'>
  <div class='half'></div>
  <div class='full'>1</div>
  <div class='full'>2</div>
  <div class='full'>3</div>
  <div class='half'></div>
</div>

@DCR, ваше решение убедило меня использовать дополнительные столбцы, но я дал им 12,5%. Итак... верхняя таблица имеет 4 столбца шириной 25% каждый, а нижняя имеет 5 столбцов ширины со следующими процентами: 12,5%, 25%, 25%, 25%, 12,5%.

Таким образом, ширина нижних идентична ширине верхних.

|   25%    |   25%    |   25%    |   25%    |
|12,5%|   25%    |   25%   |   25%    |12,5%|

Спасибо.