我有 2 个同级 div,我需要 float 它们来制作 2 列布局。
div 1 和 2 必须向左浮动,而 div 3 必须向右浮动。通常我可以通过重新排列 Div 2 和 Div 3 的位置来实现这一点,但是因为标记是由 Javascript 生成的,所以我无法重新排列它们,因此我也不必选择将 Div1 和 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 float 在 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;
}
关于html - 将第 3 个元素向右浮动,而第 2 个元素向左浮动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58508895/