Изображение, чтобы лучше объяснить проблему.
Я пытаюсь сделать столбцы во втором разделе такими же, как в первом. До сих пор я добивался этого, добавляя 13% отступов к левой и правой сторонам раздела и устанавливая правильную ширину в процентах для каждого столбца, хотя у меня были проблемы с этим, потому что он автоматически устанавливал неправильные проценты для заполнить 100% раздела.
Содержимое находится в «информационном ящике».
Если я не установлю отступы в разделе, это будет выглядеть так:
Я знаю, что должен быть лучший способ достичь того же результата. Есть идеи?
🤔 А знаете ли вы, что...
HTML может вставлять изображения, аудио и видео на веб-страницы с помощью соответствующих тегов.
.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%|
Спасибо.