0

Есть 3 элемента, в контейнере div (display flex). И мне нужно расположить их так, как нарисовано на картинке. Подскажите пожалуйста, как это сделать на flex. Структуру элементов менять нельзя, иначе, я бы сам сделал. Спасибо.

.block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F0F6F8;
    border-radius: 5px;
    width: 800px;
    padding: 20px 20px 20px 20px;
}

.block_one {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 450px;
}

.block_two {
    display: flex;
    justify-content: space-between;
    width: 200px;
}
<div class="block">

                        <img src="https://img.lovepik.com/element/40118/6371.png_300.png">
                        
                        <div class="block_one">
                            <p>Simple text1</p>
                            <p>Simple text1</p>
                            <p>Simple text1</p>
                        </div>
                        
                        <div class="block_two">
                            <p>Simple text2</p>
                            <p>Simple text2</p>
                            <p>Simple text2</p>
                        </div>
                        
</div>

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

5
  • Посмотрите здесь: ru.stackoverflow.com/q/844745/346136
    – Вадим
    20 июн 2020 в 13:41
  • Хороший пример, но у меня не удается расположить так с моими блоками. Уже даже свои правила css удалил и применил все те, что в примере. Все равно, никак.
    – rabbit
    20 июн 2020 в 14:10
  • А чем Вас не устраивает обернуть два правых блока в один?
    – Вадим
    20 июн 2020 в 14:14
  • Если я нарушу дефолтность данной структуры, да и вообще, любой части DOM этого проекта, то это может повлечь некоторые неприятные последствия. Я бы сам обернул их в div и задал flex-direction:column, но нужно сделать с тем, что есть.
    – rabbit
    20 июн 2020 в 14:18
  • @sergey kuznetsov Мне непонятно что ты хочешь сделать. Сделай хоть картинку на основе своего кода как это должно быть. 21 июн 2020 в 15:10

1 ответ 1

1

Можно сделать таким решением Расположение.

.block {
  display: table;
  /* justify-content: space-between; */
  /* align-items: center; */
  background-color: #F0F6F8;
  border-radius: 5px;
  width: 800px;
  padding: 20px 20px 20px 20px;
}

.block img {
  display: block;
  float: left;
}

.block_one {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 450px;
  float: right;
  border: 8px solid blue;
  box-sizing: border-box;
  padding: 20px;
}

.block_two {
  display: flex;
  justify-content: space-between;
  width: 200px;
  float: right;
  border: 8px solid blue;
  box-sizing: border-box;
  padding: 20px;
  margin-top: 20px;
}
<div class="block">
  <img src="https://img.lovepik.com/element/40118/6371.png_300.png">
  <div class="block_one">
    <p>Simple text1</p>
    <p>Simple text1</p>
    <p>Simple text1</p>
  </div>
  <div class="block_two">
    <p>Simple text2</p>
    <p>Simple text2</p>
    <p>Simple text2</p>
  </div>
</div>

Ваш ответ

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

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