两个左浮动的div,其中一个宽度固定,怎么让另一个宽度自适应
作者:程序员11 时间:2021-06-25 人气:330 QQ交流群\邮箱:1003265987@qq.com
两个左浮动的div,其中一个宽度固定,怎么让另一个宽度自适应
要展示的内容
<div class= "container"> <div class="left"></div> <div class="right"></div> </div> <style> /*方法一: BFC(块级格式化上下文)*/ .container{ width:1000px; height:400px; border: 1px solid red; } .left{ width:200px; height:100%; background: gray; float: left; } .right{ overflow:hidden; /* 触发bfc */ background: green; } /*方法二: flex布局 */ .container{ width:1000px; height:400px; border:1px solid red; display:flex; /*flex布局*/ } .left{ width:200px; height:100%; background:gray; flex:none; } .right{ height:100%; background:green; flex:1; /*flex布局*/ } /* 方法三: table布局 */ .container{ width:1000px; height:400px; border:1px solid red; display:table; /*table布局*/ } .left{ width:200px; height:100%; background:gray; display:table-cell; } .right{ height:100%; background:green; display: table-cell; } /*方法四: css计算宽度calc*/ .container{ width:1000px; height:400px; border:1px solid red; } .left{ width:200px; height:100%; background:gray; float:left; } .right{ height:100%; background:green; float:right; width:calc(100% - 200px); } /*方法五: margin-left方式*/ .container{ width:1000px; height:400px; border:1px solid red; } .left{ float:left; width:200px; border:1px solid red; height:100%;background:gray; } .right{ height:100%; border:1px solid blue; width:auto; margin-left:200px; } </style>
温馨提示:
欢迎阅读本文章,觉得有用就多来支持一下,没有能帮到您,还有很多文章,希望有一天能帮到您。
- 上一篇:显示省略号
- 下一篇:CSS + ul li 横向排列的两种方法