实现,两个在页面中间使用float:left形式左右排列的div块,左边的div块当滚动遇到顶部时,在页面上固定不动,右边的div块依旧保持原来的位置布局靠右
时间: 2024-03-26 20:39:32 浏览: 18
这个需求可以通过CSS中的position属性来实现。具体步骤如下:
1. 首先,将左侧div的position属性设置为fixed,这样它就会固定在页面上了。
2. 然后,将左侧div的top和left属性分别设置为0和0,这样它就会固定在页面的左上角。
3. 最后,将右侧div的margin-left属性设置为左侧div的宽度,这样右侧div就会紧贴着左侧div排列在页面的右侧。
下面是代码示例:
HTML代码:
```html
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
```
CSS代码:
```css
.container {
width: 100%;
overflow: hidden;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: #ccc;
position: fixed;
top: 0;
left: 0;
}
.right {
float: left;
width: calc(100% - 200px);
height: 200px;
background-color: #999;
margin-left: 200px;
}
```
在这个示例中,左侧div的宽度为200px,右侧div的宽度为100%-200px,这样两个div就可以平分页面的宽度。当滚动遇到顶部时,左侧div会固定在页面上,右侧div依旧保持原来的位置布局靠右。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)