1

Подскажите как исправить, уже весь мозг сломал комментарии на скрине видно, что третий комментарий вывелся под вторым, а должен был под первым, а уже четвёртый под вторым и т.д.

.testimonial-section-box {
  margin-bottom: 40px;
  margin-left: -8px;
}

.client-name {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.client-text {
  font-size: 15px;
  margin: 0 0 20px;
  line-height: 26px;
}

.col-md-6 {
  width: 50%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}
<div class="col-md-6">
  <div class="testimonial-section-box">
    <div class="row">
      <div class="col-md-2 col-sm-2 col-xs-2"><img src="{foto}" class="img-responsive img-circle" alt="testimonial1"></div>
      <div class="col-md-10 col-sm-10 col-xs-10">
        <h5 class="client-name">{author}</h5>
        <div class="client-text">{comment}</div>
      </div>
    </div>
  </div>
</div>

4
  • Откажитесь от float и используйте display: inline-block например
    – andreymal
    15 янв 2019 в 17:07
  • при display: inline-block все комментарии выводятся один под одним, так что совсем не вариант
    – user283744
    15 янв 2019 в 17:23
  • Просто вы его не доделали, вот смотрите пример jsfiddle.net/w8syenud
    – andreymal
    15 янв 2019 в 17:26
  • спасибо за совет, но не помогл он мне совсем
    – user283744
    15 янв 2019 в 17:47

1 ответ 1

0

Проблема как уже написали в комментариях выше в float, т.к. высота первого блока больше чем у второго, третий блок начинает обтекать его, а не встает под ним.

Использование float в современной веб разработке крайне не желательно, т.к. с ним возникает множество проблем и уже существуют более корректные способы для позиционирования контента.

С display: inline-block, должно все нормально встать, выше же есть ссылка на пример.
Также можно использовать display: flex

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: calc(50% - 15px);
  margin-top: 10px;
  background-color: #c9c9c9;
}
<div class="wrapper">
  <div class="item">1. Текст комментария Текст комментария Текст комментария Текст комментария Текст комментария Текст комментария</div>
  <div class="item">2. Текст комментария Текст комментария Текст комментария Текст комментария</div>
  <div class="item">3. Текст комментария </div>
  <div class="item">4. Текст комментария Текст комментария Текст комментария Текст комментария Текст комментария</div>
  <div class="item">5. Текст комментария Текст комментария Текст комментария Текст комментария</div>
</div>

Если все же с использование float, то нужно всем блокам задавать фиксированную высоту, что конечно не очень корректно, либо каждую пару блоков выносить в отдельный row.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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