Как сохранить позиционирование блоков с текстом, изменяя количество текста?

Question

[tj57]

Имеются блоки с контентом :



Если добавить текст в один из блоков, то нижний блок съезжает в сторону :



Как сделать, чтобы они оставались на своих местах и сохранялась горизонтальная линия ?

<section class="content-wrapper">
           
            <figure class="content-block">
               <input type="checkbox" id="1">
               <label for="1">
                  <div class="content-image "></div>
               </label>
               <div class="content-block-text">
                  <p class="heading">heading</p>
                  <p>Phasellus facilisis, nunc in lacinia auctor, eros lacus aliquet velit, quis lobortis risus nunc nec nisi.
                     Maecenas et turpis vitae velit volutpat porttitor a sit amet est.
                     Uthasellus facilisis, nunc in lacinia auctor, eros lacus aliquet velit, quis lobortis risus nunc nec
                  </p>
               </div>
            </figure>
           
  <!-- и так далее -->
         </section>

.content-wrapper {
  width: 70%;;
  margin: 0 auto;
  float: left;
}

.content-block {
  width: 48%;
  float: left;
  margin: 0;
  margin-top: 6%;
  font-size: 16px;
}

.content-block:nth-child(odd) {
  float: right;
}

.content-image {
  width: 100%;
  padding-bottom: 55%;
  background:#89c39b;
}

Answer 1

[Иван Иванов]

Если я правильно понял, попробуй в разметку после 2 блоков добавлять <div style="clear:both"></div> - это позволит сбросить float:left; выведет два следующих блока с новой строки.

Comments

[tj57]

добавлять после каждых двух блоков clear:both ?

[Иван Иванов]

tj57, да

[Иван Иванов]

tj57, я вообще сделал бы boostrap`пом. Примерно так

<div class="container-fluid">
   <div class="row">
           <div class="col-6">первый ваш блок</div>
           <div class="col-6">второй ваш блок</div>
           <div class="col-6">трейти ваш блок</div>
           <div class="col-6">четвертный ваш блок</div>
   </div>
</div>

Тогда бы всё происходило автоматически. Разумеется для этого надо было бы подключить boostrap к проекту.

Answer 2

[BarryHAllen]

Правильнее будет использовать свойство display вместо float

.content-block {
    display: inline-block;
}

old-school вариант - реализовать ту же логику таблицей

P.s. и да - ради такой мелочи не стоит подключать бутстрап FailFish