<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 1200px;
margin: 0 auto;
}
.container>div {
width: 1200px;
height: 700px;
}
.container>div:nth-child(odd) {
background-color: pink;
}
.container>div:nth-child(even) {
background-color: #fff;
}
aside.left,
aside.right {
width: 200px;
height: 500px;
background-color: red;
position: sticky;
top: 50px;
}
aside.right {
float: right;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<aside class="left"></aside>
<aside class="right"></aside>
<div></div>
</div>
</body>
</html>
在设置右浮动后，发现高度不一致的问题（如上图），我们可以改变两个aside标签的编写顺序，以展示代码为例，我们可以将类名为right的aside的标签写在上方，类名为left的aside的标签写在下方们就可以解决高度不一致的问题。解决后如下图所示
1521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
