前言常见的后台管理页面,左侧固定宽度展示操作菜单栏,右侧显示左侧展示管理内容。 这是一种最常见的左侧固定,右侧自适应布局方式。 左侧固定,右侧自适应布局在container1里面写2个div <body> <div class="container1"> <div class="left"> <p>左侧菜单栏1</p> <p>操作项1</p> <p>操作项2</p> <p>左侧菜单栏2</p> <p>操作项1</p> <p>操作项2</p> </div> <div class="right"> <p>这是右边展示内容,右边展示内容,右边展示内容,右边展示内容,写正文看看</p> </div> </div> </body> 让2个div元素一左一右显示,实现方式,左边的div设置float,右边设置overflow:hidden <style> .container1{ padding: 10px; border: 1px solid #d43f3a; } .left{ background: green; float: left; width: 200px; margin-right: 10px; border: 1px solid #d412ce;
} .right{ background: orange; border: 1px solid #d412ce; overflow: hidden; /*右边盒子overflow:hidden触发bfc*/ } </style> 页面效果 如果左边float高度超出,会出现上面的情况,下面有2种方法清除浮动 清除浮动(伪元素)第一种解决办法,可以在子元素这一层,加一个空的div层:<div style="clear:both"></div> <div class="container1"> <div class="left"> <p>左侧菜单栏1</p> </div> <div class="right"> <p>这是右边展示内容,右边展示内容,右边展示内容,右边展示内容,写正文看看</p> </div> <div style="clear:both"></div> </div> 但一般不推荐这样做,需要多维护一个div元素。优化方法可以使用css 给元素后面加一个伪元素:after <style> .container1{ padding: 10px; border: 1px solid #d43f3a; } .left{ background: green; float: left; width: 200px; margin-right: 10px; border: 1px solid #d412ce;
} .right{ background: orange; border: 1px solid #d412ce; overflow: hidden; /*右边盒子overflow:hidden触发bfc*/ } /*清除浮动*/ .container1:after{ content: ""; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; } </style> 实现效果:左边宽度固定,右边自适应 清除浮动(overflow: hidden)第2种解决方法更优雅一点,也是代码量最少的,可以在上一层container1这里加一个overflow: hidden (添加zoom: 1;可以解决Ie浏览器适配问题) <style> .container1{ padding: 10px; border: 1px solid #d43f3a; overflow: hidden; zoom: 1; } .left{ background: green; float: left; width: 200px; margin-right: 10px; border: 1px solid #d412ce;
} .right{ background: orange; border: 1px solid #d412ce; zoom: 1; overflow: hidden; /*右边盒子overflow:hidden触发bfc*/ } </style> 实现效果是一样的
更多页面布局方式参考https://blog.csdn.net/caicai1171523597/article/details/86642535 overflow相关知识点https://blog.csdn.net/qq_41638795/article/details/83304388 CSS 浮动float属性详解https://blog.csdn.net/qq_36595013/article/details/81810219
2021年第 9 期《python接口web自动化+测试开发》课程,10月17号开学! 加量不加价(新增postman, 赠送selenium和python基础2个课)
本期上课时间:10月17号-1月9号,每周六、周日晚上20:30-22:30
|