Столбцы в другой таблице той же ширины
Изображение, чтобы лучше объяснить проблему.
Я пытаюсь сделать столбцы во втором разделе такими же, как в первом. До сих пор я добивался этого, добавляя 13% отступов к левой и правой сторонам раздела и устанавливая правильную ширину в процентах для каждого столбца, хотя у меня были проблемы с этим, потому что он автоматически устанавливал неправильные проценты для заполнить 100% раздела.
Содержимое находится в «информационном ящике».
Если я не установлю отступы в разделе, это будет выглядеть так:
Я знаю, что должен быть лучший способ достичь того же результата. Есть идеи?
@Paulie_D Добавил некоторые подробности, может поможет?
Не совсем, что значит «сделать столбцы во втором разделе такими же, как в первом»? Такая же ширина? Там же, где и столбец выше? Как это должно выглядеть? Также, как уже упоминалось, нам нужен минимальный воспроизводимый пример
Вы хотите сказать, что всего всегда 7 фотографий? Или, например, требуется другой макет? более узкие устройства и/или фотографий может быть больше или меньше? Если вы знаете, что это 7, то сетка из 8 столбцов легко сделает это за вас.
Ответы 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>Да, на дивах это работает именно так, как мне нужно. Но я пробовал это с разделами и столбцами, раздел — это класс «контейнер», столбцы с информационным полем — это «полный» класс, а пустые столбцы — это «половинный» класс. А выглядит это так: img
@DCR, ваше решение убедило меня использовать дополнительные столбцы, но я дал им 12,5%. Итак... верхняя таблица имеет 4 столбца шириной 25% каждый, а нижняя имеет 5 столбцов ширины со следующими процентами: 12,5%, 25%, 25%, 25%, 12,5%.
Таким образом, ширина нижних идентична ширине верхних.
| 25% | 25% | 25% | 25% |
|12,5%| 25% | 25% | 25% |12,5%|
Спасибо.
что важно, так это то, что дополнительные столбцы составляют половину размера полных столбцов - по крайней мере, для кадра 4, 3. Проверьте флексбокс
Вопросы, требующие помощи по коду, должны включать кратчайший код, необходимый для его воспроизведения, в самом вопросе, желательно в Фрагменте стека с использованием значка
<>. См. Как создать минимальный воспроизводимый пример.