Как расположить блоки таким образом?

124
01 января 2022, 18:10

Как расположить блоки, как на фото?

Чтобы блоки были строго выровнены относительно один одного, были отступы, адаптивность. Через FLexbox или Grid? Или еще есть варианты? Как будет лучше?

Answer 1

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
.container { 
  width: 600px; 
  margin: 30px auto; 
} 
 
.container__inner { 
  display: flex; 
  align-items: center; 
  flex-wrap: wrap; 
  margin: -15px; 
} 
 
.container__item { 
  padding: 15px; 
  width: 33.333333333%; 
} 
 
.container__item:nth-child(1) { 
  width: 66.666666666%; 
} 
 
.block { 
  border: 1px solid black; 
  height: 150px; 
}
<div class="container"> 
  <div class="container__inner"> 
    <div class="container__item"> 
      <div class="block"></div> 
    </div> 
 
    <div class="container__item"> 
      <div class="block"></div> 
    </div> 
 
    <div class="container__item"> 
      <div class="block"></div> 
    </div> 
 
    <div class="container__item"> 
      <div class="block"></div> 
    </div> 
 
    <div class="container__item"> 
      <div class="block"></div> 
    </div> 
  </div> 
</div>

READ ALSO
Не простая задача на c++

Не простая задача на c++

Ломал голову час, но ничего кроме как решить задачу через массив не получилосьПреподаватель требует решить задачу без использования массивов

146
Отображение на одной плоскости двух графиков QWT

Отображение на одной плоскости двух графиков QWT

Что нужно сделать чтобы получить два графика на плоскости QWT? Вот мой код

145
Почему вложенный класс не объявляется другом?

Почему вложенный класс не объявляется другом?

Внутреннему классу MyIterator нужно получить доступ к приватному полю RBTree<T,R> tree, лежащему во внешнем классе Map:

94
Visual studio с++ бинарная совместимость

Visual studio с++ бинарная совместимость

У меня есть сторонняя dll, скомпилированная в vs2008Исходников ее нету

197