0

введите сюда описание изображенияНе получается расположить элементы в нужном порядке. Слева иконка - справа текст.

структура кода такая

<div>
<img>
<span></span>
</div>

Диву задаю

display: flex;
align-items: center;
flex-wrap: wrap;

А, результат как на изображении(

введите сюда описание изображения

4
  • Ну так flex-wrap уберите - будет как Вы хотите... 20 ноя 2021 в 20:30
  • @VladimirGonchar Если он его уберет, то переноса не будет, а я так понял ему нужно сделать лево-право. При этом если не хватает место, был перенос.
    – WalkMess
    20 ноя 2021 в 20:35
  • @vadage используйте общий класс, для картинки и span, задав flex: 0 calc(50% - отступы)
    – WalkMess
    20 ноя 2021 в 20:37
  • @VladimirGonchar убрал, не помогло, оно переносит же
    – vadage
    20 ноя 2021 в 20:38

2 ответа 2

0

Если правильно понял, то структура такая:

<div class="flex-container">
    <img class="icon" src="icon1.png">
    <p class="desc">Firstly we need to do...</p>
</div>
<div class="flex-container">
    <img class="icon" src="icon2.png">
    <p class="desc">Secondly...</p>
</div>
<!-- (...) -->

Тогда делаем так:

.icon {
    /* Размер не важен, главное, чтобы он был фиксированным */
    width: 1.5rem;
    height: 1.5rem;
}
.flex-container {
    display: flex;
}

По сути это всё, что вам нужно. Иконка будет слева, текст справа. Но есть одно но: если высота текста будет больше, чем высота иконки, то слева под ней будет пустое место. Если это нежелательно, то можно убрать display: flex и просто иконке установить обтекание float: left. У этого способа тоже есть подводные камни, поэтому советую почитать в инете поподробнее.

0

Возьму у себя пример секции.

*,
*:before,
*:after {
  box-sizing: border-box;
  vertical-align: top;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-size: inherit;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
}

html,
body {
  height: 100%;
}

.wrapper {
  max-width: 680px;
  margin: 0 auto;
}

.button-card { 
  cursor: pointer;
  background: transparent;
  text-transform: lowercase;
  color: #fff;
  font-size: 12px;
}

.blog {
  padding: 50px 20px;
  height: 100%;
}

.blog__title {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 50px;
  letter-spacing: 2px;
  font-size: 20px;
}

.blog__product {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 200px;
}

.blog__card {  
  flex: 1 calc(50% - 10px);
  align-self: stretch;
  padding: 10px; 
  margin-bottom: 10px;
  margin-right: 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid #fff;
  border-radius: 7px;
}

.blog__card-title {
  color: #fff; 
  margin-bottom: 20px;
  font-weight: 300;
  letter-spacing: 1px;
  border-bottom: 2px solid #fff;
}
<section class="blog">
        <div class="wrapper">
          <div class="blog__product">
            <div class="blog__card">
              <h3 class="blog__card-title">Значимость этих проблем настолько очевидна, что начало повседневной работы по формированию позиции способствует подготовке и реализации модели развития?</h3>
              <button class="blog__card-open button-card" type="button">Читать</button>
            </div>
            <div class="blog__card">
              <h3 class="blog__card-title">Жить</h3> 
              <button class="blog__card-open button-card" type="button">Читать</button>
            </div>
            <div class="blog__card">
              <h3 class="blog__card-title">Развиваться</h3> 
              <button class="blog__card-open button-card" type="button">Читать</button>
            </div>
          </div>
        </div>
      </section>

Ваш ответ

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

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