Как поставить иконку рядом с текстом?

Question

[barsecky]

Всем привет!
Стыдно, но видемо я туплю((
Вопрос: нужно поставить иконку рядом с текстом, за счет ширины блока часть текста ушла на вторую строку, из-за этого появляется занятое пространство тектом и иконка не становится рядом, как в тех блоках где слово в одну строчку.
Выручайте))

<div class="duties__block-wrapper">
                                <div class="duties__block-content">
                                    <h3 class="duties-subtitle">Создание постов</h3>
                                    <img src="./img/duties/image_1.jpg" alt="img" class="img_right">
                                </div>

                                <div class="duties__block-content">
                                    <h3 class="duties-subtitle">Подбор фото и видеоконтента</h3>
                                    <img src="./img/duties/image_2.jpg" alt="img" class="img_right">
                                </div>

                                <div class="duties__block-content">
                                    <h3 class="duties-subtitle">Разработка стратегии</h3>
                                    <img src="./img/duties/image_3.jpg" alt="img" class="img_right">
                                </div>

                                <div class="duties__block-content">
                                    <h3 class="duties-subtitle">Продажи</h3>
                                    <img src="./img/duties/image_4.jpg" alt="img" class="img_right">
                                </div>
                            </div>

.duties__block-wrapper {
    display: flex;
    flex-direction: column;
}
.duties__block-wrapper > * + * {
    margin-right: 66px;
}
.duties__block-content {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 259px;

    font-weight: 600;
    font-size: 16px;
    line-height: 1.30;
    color: #4B4B4B;
}
.duties__block-content:not(:last-child) {
    margin-bottom: 28px;
}
.duties-subtitle {
    margin-left: 20px;
}
.duties__block-content::before {
    position: absolute;
    content: "";
    display: block;
    top: -1px;
    width: 39px;
    height: 39px;
    background-color: #FFCC33;
    border-radius: 50%;
    z-index: -1;
}
.img_right {
    width: 36px;
    height: 36px;
    margin-left: 10px;
}
.duties__block-text {
    max-width: 580px;
}

Comments

[Фёдор]

Картинку в отдельный div положите, должно сработать.

[barsecky]

Фёдор, не помогло(((

[Aleks030]

Да это по моему проблемам во флексах где было два слова и они не влезли на 1 пиксель флексы сбросили слово в низ а контейнер остался большим! Попробуйте указать фиксированную ширину контейнерам duties__block-content
но тогда Вы потеряете адаптивность! Попробуйте картинкам (проблемным)дать другой класс каждой свой и регулировать margin-left: сперва попробуйте все без него если будет далеко margin-left:применяйте с минусом больше ни чего предложить не могу! Флексы это такая гадость они выстраиваются по самому большому элементу и судя по всему они вытянулись по одному самому длинному слову с иконкой! Еще попробуйте display: flex; расписать с префиксами может тогда)! Есть еще один способ! Вставите иконки которые стоят далеко прямо внутри тегов

<h3 class="duties-subtitle">Подбор фото и <img src="./img/duties/image_2.jpg" alt="img" class="img_right"></h3>

Это не правильно но это сработает!!

[barsecky]

Aleks030, да откуда отступ я знаю)) а вот как его убрать не прибегая к псевдо элементам я не знаю(((
Отступ от строки, как сделать что бы текст переходил на другую строку и при этом занимал только то место на котором он находится? вот в этом весь вопрос

[barsecky]

Aleks030, Хотя ваш вариант помог, но что делать когда на сайте вдруг поменяется контент? опять марджины править?

[Роман]

Можно вручную вставить переносы строк.
Хоть это и не очень красиво, но зато работает.

[Aleks030]

barsecky, К сожалению Вы эти отступы не уберете легально. Дело в том что здесь накладываются два нюанса. Первое, при загрузке страницы флекс выстраивает элементы по их размеру, если они не влезли схлопывает предложение по самому длинному слову. Второе если разница в сестренских элементах не дотягивает до 1% то движок броузера не заморачивается переписывать блок! Единственный выход вытаскивать иконки из контейнера с параграфом помещать каждую в див и делать из них флекс элементы а дальше выравнивать в одну вертикальную линию.А если контент изменится в любом случае Вашы флексы развалятся и поплывут на другие строки! А Вам критично поддержка старого лома типа 9 эксплорера если нет и надобности в поддержке старых сотовых, перейдите на гриды, там такой проблемы нет.

Answer 1

[barsecky]

Решил вопрос с помощью br в строке))

Answer 2

[nuralimkk]

ну как вариант каждой картинке отдельный класс придай и там уже пропиши отступы