Как расположить DIV с картинкой справа от UL?

Question

Возможно ли расположить div с картинкой и текстом справа от списка? Пример:

Код:

.adventeges {
    background-color: #fff;

}

.adventeges__inner {
    text-align: center;
    padding-top: 100px;
    font-size: 36px;
    font-weight: 900;
    color: #636c6c;
}

.adventeges__description {
    font-weight: 600;
    font-size: 16px;
    color: #afb8b8;
    padding-top: 45px;

}

.adventeges_list {
    text-transform: capitalize;
    list-style: none;
    padding: 100px 0;
    display: inline-block;

}


.adventeges_element {
    margin-top: 140px;

}

.adventeges_button {
    color: #9fa9a9;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    transition: 0.2s linear;
    padding-right: 20px;


}



.adventeges_button:hover {
    color: #636c6c;
    border-right: 10px solid #5dca88;

}

.adventeges_icon {

    margin-top: 140px;
    color: #9fa9a9;
    margin-right: 45px;
    font-size: 48px;

}

.first_adventege {
    background: url("imgs/healthy_food.png" right no-repeat);
    display: inline-block;

}

<div class="adventeges">
        <div class="container">
            <div class="adventeges__inner">
                Наши преимущества
                <div class="adventeges__description">
                    Доставка продуктов каждый день в указанное вами время, богатый ассортимент и высокое качество наших продуктов питания.
                </div>
            </div>


            <ul class="adventeges_list">
                <li features_element><i class="far fa-heart fa-fw adventeges_icon" id="adv_icon"></i>
                    <btn class="adventeges_button" name="Healty_food">Полезная еда</btn>
                </li>
                <li features_element><i class="fas fa-briefcase fa-fw adventeges_icon" id="adv_icon"></i>
                    <btn class="adventeges_button" name="good working conditions">Хорошие условия труда</btn>
                </li>
                <li features_element><i class="fas fa-leaf fa-fw adventeges_icon" id="adv_icon"></i>
                    <btn class="adventeges_button" name="hq_raw_materials">Высококачественное сырьё</btn>
                </li>
                <li features_element><i class="fas fa-thumbtack fa-fw adventeges_icon" id="adv_icon"></i>
                    <btn class="adventeges_button" name="quick_delivery">Быстрая доставка до двери</btn>
                </li>
                <li features_element><i class="fas fa-umbrella fa-fw adventeges_icon" id="adv_icon"></i>
                    <btn class="adventeges_button" name="stability">Стабильность</btn>
                </li>

            </ul>
        </div>
    </div>

Answer 1

Ваша разметка мне не понятна, пришлось переделать.

Да, конечно расположить блок слева или справа от блока можно.

Есть разные варианты решения.

Задайте 2 блокам разный float и соотношение width
Написать родителю flex, создавать внутри родителя 2 блока, первый ul, второй div.

.adventeges {
    background-color: #fff;

}

.adventeges__inner {
    text-align: center;
    padding-top: 100px;
    font-size: 36px;
    font-weight: 900;
    color: #636c6c;
}

.adventeges__description {
    font-weight: 600;
    font-size: 16px;
    color: #afb8b8;
    padding-top: 45px;

}  

.flex { 
  display: flex; 
  align-items: center;
}

.adventeges_list { 
    text-transform: capitalize;
    list-style-type: none;
    padding: 100px 0;
}  

.adventeges_list li {
   border-right: 10px solid #000; 
   transition: 0.2s;
}  

.adventeges_list li:hover {
    color: #636c6c;
    border-right: 10px solid #5dca88;

}

.adventeges_button {   
    cursor: pointer;
    width: 300px; 
    border: none; 
    background-color:  transparent;
    color: #9fa9a9;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    transition: 0.2s linear;
    padding-right: 20px; 
}



.adventeges_button:hover {
    color: #636c6c;
}

.adventeges_icon {
    margin-top: 140px;
    color: #9fa9a9;
    margin-right: 45px;
    font-size: 48px;

}  

.panel img { 
  margin: 0 20px;
}

.panel img { 
  width: 50%;
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Great Demo on CodePen</title>
</head>
<body>
  <div class="adventeges">
        <div class="container">
            <div class="adventeges__inner">
                Наши преимущества
                <div class="adventeges__description">
                    Доставка продуктов каждый день в указанное вами время, богатый ассортимент и высокое качество наших продуктов питания.
                </div>
            </div>

           <div class="flex">
            <ul class="adventeges_list">
                <li><i class="far fa-heart fa-fw adventeges_icon"></i>
                    <button class="adventeges_button" type="button" name="Healty_food">Полезная еда</button>
                </li>
                <li><i class="fas fa-briefcase fa-fw adventeges_icon"></i>
                    <button class="adventeges_button" type="button" name="good working conditions">Хорошие условия труда</button>
                </li>
                <li><i class="fas fa-leaf fa-fw adventeges_icon"></i>
                    <button class="adventeges_button" type="button" name="hq_raw_materials">Высококачественное сырьё</button>
                </li>
                <li><i class="fas fa-thumbtack fa-fw adventeges_icon"></i>
                    <button class="adventeges_button" type="button" name="quick_delivery">Быстрая доставка до двери</button>
                </li>
                <li><i class="fas fa-umbrella fa-fw adventeges_icon"></i>
                    <button class="adventeges_button" type="button" name="stability">Стабильность</button>
                </li>
            </ul> 
          
            <div class="panel"> 
                <img src="https://univerlib.com/wp-content/uploads/2018/11/4.png" alt="">
            </div> 
          </div>
        </div>
    </div>
</body>
</html>

это хотя бы похоже на правду. Хоть и с большими погрешностями и без БЭМ.

БЛОГ НА HUSL

Как расположить DIV с картинкой справа от UL?

Ответы (1 шт):