0

Как сделать так, чтобы каждый блок строго шел за следующим и если один из них выше другого - чтобы не терялась структура, как сейчас в коде ниже:

.style_block {
  width: 23%;
  float: left;
  background-color: #eee;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 10px
}
<div class="style_block">
  Блок
</div>
<div class="style_block">
  Блок2 Блок2 Блок2 Блок2 Блок2 Блок2 Блок2 Блок2 Блок2 Блок2 Блок2 
</div>
<div class="style_block">
  Блок
</div>
<div class="style_block">
  Блок
</div>
<div class="style_block">
  Блок
</div>
<div class="style_block">
  Блок
</div>
<div class="style_block">
  Блок
</div>
<div class="style_block">
  Блок
</div>
<div class="style_block">
  Блок
</div>

1
  • если очень сильно нужно через флоат, то на сцену нужно будет пригласить js))) а так, флекс бокс, думю идеально подойдет)
    – Ruslan
    19 июл 2019 в 17:52

1 ответ 1

2

Решение с помощью Flexbox Вам подходит?

Или нужно именно на Float?

section {
    display: flex;
    flex-wrap: wrap;
}

.style_block {
    width: 23%;
    /* float: left; */
    background-color: #eee;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 10px
}
<section>
    <div class="style_block">
        Блок
    </div>
    <div class="style_block">
        Блок2 Блок2 Блок2 Блок2 Блок2 Блок2 Блок2 Блок2 Блок2 Блок2 Блок2
    </div>
    <div class="style_block">
        Блок
    </div>
    <div class="style_block">
        Блок
    </div>
    <div class="style_block">
        Блок
    </div>
    <div class="style_block">
        Блок
    </div>
    <div class="style_block">
        Блок
    </div>
    <div class="style_block">
        Блок
    </div>
    <div class="style_block">
        Блок
    </div>
</section>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.