第三个元素向右浮动，而前两个元素向左移动 [英] Floating 3rd element right while first 2 go left

问题描述

我需要浮动两个同级div才能形成两列布局。

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

推荐答案

好的，尝试使用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

这篇关于第三个元素向右浮动，而前两个元素向左移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！