将第三个元素向右浮动，而前两个元素向左浮动

Question

我有两个同级div，我需要浮动它们来制作2列布局。

Div 1和2必须向左浮动，Div 3必须向右浮动。通常情况下，我可以通过重新排列Div 2和Div 3的位置来实现这一点，但由于标记是由Javascript生成的，我没有重新排列它们的奢侈，因此我也不必选择将Div 1和Div 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漂浮在Div 1旁边而不重新排列标记？

Answer 1

Okay尝试使用flex box并为所有div提供order属性。

.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

Answer 2

我建议您在父div上使用flex，并更正子div的百分比比率，使其总和达到100%。我给了左边的空白：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;
}