Происходит перенос текста в блоках

118

14 января 2020, 09:40

Верстаю страницу и первый блок получается как нужно (2 строки текста), но остальные переносят его на следующую строку. Подскажите пожалуйста, в чем проблема и как это исправить. Прикладываю скрины кода html/CSS, также скрины из ИР, и скрин блока макета(как должно быть)]4]5

Answer 1

Скриншоты не стал рассматривать ...вот так ни чего не переносится так на месте иконки на месте ...так надо было ??

.block { 
  width: 90%; 
  margin: auto; 
  text-align: center; 
} 
 
.items { 
  width: 90%; 
  max-width:1020px; 
  margin: auto; 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-around; 
  height: 300px; 
  align-items: stretch; 
} 
 
.item { 
  background: #fbfbfb; 
  padding: 10px; 
  width: 250px; 
  border: 1px solid #fff; 
  margin: 10px 0; 
  display: flex; 
  justify-content: space-between; 
} 
 
.item div:first-child { 
  width: 40px; 
  padding-top: 10px; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css"> 
 
<div class="block"> 
  <h2>amazing services</h2> 
</div> 
<div class="items"> 
  <div class="item"> 
    <div> 
      <div class="fa fa-star"></div> 
    </div> 
    <div> 
      <h3>lorem shmorem</h3> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, odio!</p> 
    </div> 
  </div> 
  <div class="item"> 
    <div> 
      <div class="fa fa-star"></div> 
    </div> 
    <div> 
      <h3>lorem shmorem</h3> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, odio!</p> 
    </div> 
  </div> 
  <div class="item"> 
    <div> 
      <div class="fa fa-star"></div> 
    </div> 
    <div> 
      <h3>lorem shmorem</h3> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, odio!</p> 
    </div> 
  </div> 
  <div class="item"> 
    <div> 
      <div class="fa fa-star"></div> 
    </div> 
    <div> 
      <h3>lorem shmorem</h3> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, odio!</p> 
    </div> 
  </div> 
  <div class="item"> 
    <div> 
      <div class="fa fa-star"></div> 
    </div> 
    <div> 
      <h3>lorem shmorem</h3> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, odio!</p> 
    </div> 
  </div> 
  <div class="item"> 
    <div> 
      <div class="fa fa-star"></div> 
    </div> 
    <div> 
      <h3>lorem shmorem</h3> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At, odio!</p> 
    </div> 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Общезначимость атрибута <kbd>

Скажите, пожалуйста, этот атрибут используется только на этом сайте или он применяется вообще в html?

151

HTML

Как вызвать функцию через JS?

У меня есть простая функция showSecretMenu, и я вызываю её через html файл вот как-то так

122

HTML

Синхронизация изменений двух сайтов

Как можно посредством VPN синхронизировать изменения одного сайта на другом? Например, на двух сайтах есть textbox, изменения textbox'a на одном сайте...

141

jQuery

Помогите доработать JQUERY меню

143