Как лучше всего разметить шаблон сайта?

231

02 марта 2018, 15:04

Доброго времени суток. Подскажите как лучше всего в HTML разметить такой шаблон? Таблицей?

Answer 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.