Как правильно верстать такие блоки?

Question

[Cosmonaut .]

Здравствуйте!
Помогите пожалуйста! как правильно и адаптивно верстать такие блоки?

Answer 1

[dicem]

Bootstrap 3.*:

<div class="container">
  <div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
  </div>
</div>

Ну для адаптивности используйте классы col-lg-* col-md-* col-sm-* col-xs-*

Comments

[NaN]

Зачем делать сетку там, где она не нужна?

[dicem]

NaN, там вобще не ясно что нужно если уж на то пошло

[dicem]

NaN, можно на флексах, на гридах делать, на чем угодно вобще, вот насетке пожалуйста один из вариков

[NaN]

dicem, делать конечно можно на чем угодно. Но просто в местах где можно не использовать бутстрап - лучше его не использовать. Но это просто мое мнение и опыт) Каждый делает как хочет в любом случае.

Answer 2

[Владимир Проскурин]

Не надо float. Делаете через флексы, и ставьте блоку свойство
justify-content: space-between
тогда блоки равномерно распределятся по всей ширине. Если хочется ровно 25% ширины, то ставьте flex-basis: 25% каждому блоку.

Answer 3

[NaN]

Примерно так
Логотип оставляете в левой части.
Оставшееся помещаете в общий див и выравниваете справа, задав соответствующий класс.
Каждому элементу делаете враппер, которому задаете отступ слева, кроме последнего элемента.
Для именование классов используйте БЭМ, будет более понятно что к чему относится

Answer 4

[Dyzz24]

Родителю display: flex

Далее, если хочется просто раскидать по контейнеру без заморочек, justify-content: space-between

Answer 5

[Павел]

О чем конкретно речь то?
Тут 4 блока, значит делается что то вроде:

<style>
.wrap {width:100%;margin: auto;}
.wrap .col {width:25%;float:left;}
</style>
<div class="wrap">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>

Comments

[Cosmonaut .]

хочу чтобы все блоки отображалось чётка и адаптивно