想实现的效果是左边一张大的,右边两个小的上下排列
但是他自动继续往右扩了
以下是html的代码
引用 皆我百晓生 小程序回复内容作答:
你可以使用flexbox布局来实现这个效果。首先,你可以将容器的display属性设置为flex,这样它的子元素就可以按照一行排列。然后,你可以使用flex-direction属性将子元素的排列方向设置为列(column),这样它们就会在垂直方向上进行排列。最后,你可以将box2和box3的order属性设置为负值,这样它们就会被放置在box1的下方。以下是修改后的代码:
<!DOCTYPE html>
<html>
<head>
<title>wangye</title>
<style>
body {
margin: 0;
padding: 0;
}
.nav {
width: 100%;
height: 80px;
background-color: black;
margin-bottom: 12px;
}
.middle {
width: 100%;
height: 2000px;
background-color: white;
}
.center {
margin: 0 auto;
width: 2010px;
background-color: white;
}
.container {
display: flex;
flex-direction: column;
}
.box1 {
width: 800px;
height: 300px;
background-color: aquamarine;
}
.box2 {
width: 300px;
height: 150px;
background-color: aquamarine;
order: -1;
}
.box3 {
width: 300px;
height: 150px;
background-color: aquamarine;
order: -2;
}
</style>
</head>
<body>
<div class="nav"></div>
<div class="middle">
<div class="center">
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</div>
</body>
</html>
这样,box2和box3就会在box1的下方进行排列了。请注意,你可能需要根据你的具体布局需求对容器和子元素的宽度和高度进行调整。
阿SIR,html代码哪?光看css看不出来奥