将第 3 个元素向右浮动，而第 2 个元素向左浮动

Question

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

Div 1 和 2 必须向左浮动，div 3 必须向右浮动。通常我可以通过重新排列 Div 2 和 Div 3 的位置来得到这个，但是因为标记是由 Javascript 生成的，所以我没有重新排列它们的奢侈，也不必选择分组Div1 和 2 结果一起。

无论我尝试什么或我尝试什么清除CSS，Div 3总是出现在Div 2下方的右侧，当我需要它时，它会出现在旁边的顶部Div1.

这是我必须使用的：

.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 旁边而不重新排列标记？

Answer 1

我建议您在 parent div 上使用 flex 并更正 child div 的百分比，使其总和为 100%。我已经为你想放在右端的 child 提供了 margin-left:auto，即使你减少其他 div 的宽度，它也会浮动在右侧。演示 here

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

Answer 2

好的，尝试使用 flex box 并下达命令属性所有 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;
}

工作示例：https://codepen.io/shubham997/pen/ExxWYEd?editors=0100

将第 3 个元素向右浮动，而第 2 个元素向左浮动

Floating 3rd element right while first 2 go left

html

css

multiple-columns

css-float