<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 80%; margin: 0 auto; height: auto; font-size: 40px; color: #fff; text-align: center; } .hs_left{ width: 200px; height: 400px; background: #f90; float: left; } .hs_right{ height: 400px; background: #f00; margin-left: 200px; } </style> </head> <body> <div class="box"> <!--此功能实现的主要原理是:让浮动的元素(脱离文档流)固定显示。让普通的块级元素宽度自适应,之所以加上margin-left 因为浮动的元素脱离文档流之后会覆盖一部分浏览器内容--> <div class="hs_left"> 左面</div> <div class="hs_right"> 右面</div> </div> </body> </html>
实现页面左侧固定,右侧随浏览器宽度变化而变化的布局
最新推荐文章于 2021-06-16 07:06:00 发布