Question

我有2个同级div，需要进行浮动才能进行2列布局。

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

无论我尝试什么或尝试哪种清晰的CSS，当我需要在Div 1旁边的顶部时，Div 3始终会出现在右侧Div 2的下方。

这是我必须使用的：

.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

好吧，尝试使用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％。我为您要放置在右端的孩子指定了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;
}

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

2 个答案: