Доброго времени суток. Подскажите как лучше всего в HTML разметить такой шаблон? Таблицей?
3
-
2таблицы, флекс, float– HamSter28 фев 2018 в 17:48
-
flex для этой задачи отлично подоёдёт, у вас будет внешний контейнер горизонтальный flex и внутренние флексы для вертикальных списков.– Дмитрий Полянин28 фев 2018 в 18:31
-
Если поддержка браузеров не супер тотальна, то идеально подойдёт CSS Grid. Flexbox он 1D, а CSS Grid как раз 2D.– Vadim Ovchinnikov28 фев 2018 в 22:38
Добавить комментарий
|
1 ответ
Вот основная идея такой разметки на Flex.
Полностью подгонять код под ваш вопрос не стал, так как нужна ваша работа.
.horisontal-container {
display: flex;
flex-wrap: wrap;
}
.vertical-container {
display: flex;
flex-direction: column;
}
.row-item {
height: 20px;
width: 100px;
background-color: green;
margin: 2px;
}
.full-block {
height: calc(20px * 4 + 4px * 3);
width: 200px;
background-color: orange;
margin: 2px;
}
<div class="horisontal-container">
<div class="full-block">
</div>
<div class="vertical-container">
<div class="row-item"> </div>
<div class="row-item"> </div>
<div class="row-item"> </div>
<div class="row-item"> </div>
</div>
<div class="vertical-container">
<div class="row-item"> </div>
<div class="row-item"> </div>
<div class="row-item"> </div>
<div class="row-item"> </div>
</div>
</div>
Код достаточно адаптивный, и будет работать на разных разрешениях экрана.
Для полной адаптивности надо использовать media query
.
-
Мне кажется недостаточно адаптивный. Лучше убрать height: calc(20px * 4 + 4px * 3) так как мы привязываемся к количеству, размеру и отступам и добавить просто align-items: stretch; на .horisontal-container– Get-Web28 фев 2018 в 21:50
-
-
@l2banners хорошая идея, вечером попробую, мне самому этот cacl не понравился, пробовал height: 100% но не сработал. 1 мар 2018 в 7:50