Плавающий 3-й элемент вправо, в то время как первые 2 идут влево - PullRequest
Новая
       42

Плавающий 3-й элемент вправо, в то время как первые 2 идут влево

0 голосов
/ 22 октября 2019

У меня есть 2 родных элемента div, которые мне нужны, чтобы создать макет из 2 столбцов.

Div 1 и 2 должны плавать влево, а div 3 должен плавать вправо. Обычно я могу получить это, переставив позиции Div 2 и Div 3, но поскольку разметка генерируется Javascript, я не могу позволить себе роскошь переставлять их, и при этом я не должен выбирать между группами Div1 и 2.

Независимо от того, что я пытаюсь или какой ясный CSS я пытаюсь сделать, Div 3 всегда появляется ниже Div 2 справа, когда мне это нужно вверху рядом с Div 1.

Это то, что я долженработа с: 

.parent{
width:800px;
}

.div1{
float:left;
width:60%;
height:100px;
background:red;
}

.div2{
float:left;
width:60%;
height:100px;
background:red;
}

.div3{
float:right;
width:40%;
background:blue;
height:100px;
}
<div class="parent">
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</div>

Есть ли способ сделать плавающее Div 3 рядом с Div1 без перестановки разметки?

Ответы [ 2 ]

1 голос
/ 22 октября 2019

Хорошо, попытался сделать это с помощью flex box и присвоить свойству заказа все дивы. 

 .parent{
  width:800px;
   display: flex;
   flex-wrap: wrap;
}

.div1{
width:60%;
height:100px;
background:red;
order: 1;
}

.div2{
width:60%;
height:100px;
background:red;
  order: 3;
}

.div3{
width:40%;
background:blue;
height:100px;
order: 2;
}

рабочий пример: https://codepen.io/shubham997/pen/ExxWYEd?editors=0100

0 голосов
/ 22 октября 2019

Я предлагаю вам использовать flex для родительского div и скорректировать процентное соотношение дочерних div, чтобы оно составляло 100%. Я дал поле left-left: auto для ребенка, который вы хотите поместить в правый конец, который будет плавать с правой стороны, даже если вы уменьшите ширину других элементов div. Демоверсия здесь 

<div class="parent">
  <div class="col-left">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
  </div>
<div class="div3">Div 3</div>
</div>

   .parent{
width:800px;
display:flex;
}

.col-left{
  display:flex;
  flex-direction:column;
  width:60%;
}

.div1, .div2{
height:100px;
background:red;
width:100%;
}

.div3{
margin-left:auto;
width:40%;
background:blue;
height:100px;
}
...