我在float创建特定布局时遇到问题。问题是需要三个盒子/容器才能让第一个盒子和第三个盒子在同一条线上，而第二个盒子放在它们下面。我似乎只能让第二个框浮动到第三个框。但是我希望第三个框向右浮动，而第一个框向左浮动。如果你在代码笔中看到代码，我的目标是让绿色框与红色框对齐，蓝色框位于它们下方。谢谢！
https://codepen.io/benjiesongsong/pen/VwZpRGN
.container {
width: 1200px;
overflow: auto;
margin: 0 auto
}
.box1 {
width: 800px;
height: 400px;
background: red;
float: left;
}
.box2 {
width: 800px;
height: 400px;
background: blue;
float: left;
}
.box3 {
width: 400px;
height: 400px;
background: green;
float: right;
}<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>只要您使用浮动，order您的 codepen 中的设置就无效（它们仅适用于 flexbox 子项）-您必须更改 HTML 代码中元素的顺序。
.container {
width: 1200px;
overflow: auto;
margin: 0 auto
}
.box1 {
width: 800px;
height: 400px;
background: red;
float: left;
}
.box2 {
width: 800px;
height: 400px;
background: blue;
float: left;
}
.box3 {
width: 400px;
height: 400px;
background: green;
float: right;
}<div class="container">
<div class="box1"></div>
<div class="box3"></div>
<div class="box2"></div>
</div>但是如果你使用 flexbox，你可以按照你在 HTML 中的顺序来完成，使用display: flex和flex-wrap用于容器和order设置子元素：
.container {
width: 1200px;
overflow: auto;
margin: 0 auto;
display: flex;
flex-wrap: wrap
}
.box1 {
width: 800px;
height: 400px;
background: red;
order: 1;
}
.box2 {
width: 800px;
height: 400px;
background: blue;
order: 3;
}
.box3 {
width: 400px;
height: 400px;
background: green;
order: 2;
}<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句