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

我有两个同级div，我需要浮动以形成两列布局

第1和第2部分必须向左浮动，第3部分必须向右浮动。通常，我可以通过重新排列div2和div3的位置来实现这一点，但由于标记是由Javascript生成的，因此我没有必要重新排列它们，也不必选择将Div1和div2分组在一起

无论我尝试了什么，或者尝试了什么清晰的CSS，当我需要它时，Div 3总是出现在Div 2下面的右侧，位于Div 1旁边的顶部

这就是我必须处理的问题：

.家长{ 宽度：800px； } .1分部{ 浮动：左； 宽度：60%； 高度：100px； 背景：红色； } .第2分部{ 浮动：左； 宽度：60%； 高度：100px； 背景：红色； } .第3分部{ 浮动：对； 宽度：40%； 背景：蓝色； 高度：100px； } 第一组 第2组 第3组

---

我建议您对父div使用flex，并更正子div的百分比比率，使其总和达到100%。我已经给左边空白：你想放在右端的孩子的自动，即使你减少其他div的宽度，它也会在右边浮动。演示

---

好的，试着用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;
}

---

工作示例：

哦，我的实际元素没有固定高度，我在示例中添加了这些元素，以便您可以看到它的位置。div是动态的，可以根据提要进行扩展或收缩，所以这不是一个选项。很遗憾：哦，这很有效，谢谢！我不知道你可以订购这样的弹性盒元件。我学到了一些新的东西。对不起，如果我不够具体，我的布局必须是2列，第一和第二部分在左边，第三部分在右边。我不能把所有的三个div并排放在一起。感谢您的尝试：

 .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;
}