实现一个div,左边固定div宽度200px,右边div自适应
<
div class= "container"> <div class="left"></div> <div class="rigth"></div> </div> <style> /*方法一: BFC(块级格式化上下文)*/ .container{ width:1000px;height:400px;border: 1px solid red; } .left{ width:200px;height:100%;background: gray; float: left; } .rigth{ 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); } </style>
---------------------------------------------------------------------------------------------------
<div style="width:100%;height:auto;overflow:hidden">
<div style="float:left;width:200px;height:auto;min-height:300px;background:#f00">左边固定宽度</div>
<div style="margin-left:200px;width:100%">右边撑满剩余宽度</div>
相关文章
- 用伪类实现一个div的宽度和高度是固定百分比
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
- css实现左右布局,左侧div固定不变,右侧div宽度自适应
- 实现一个div,左边固定div宽度200px,右边div自适应
- (礼拜一log)前端开发:
标签的 colspan 属性 & 两个div并排、一个宽度固定的实现方法