两栏布局:左侧固定宽度,右侧自适应
先看一下页面布局:
<div class="wrap"> <div class="left"> 左侧固定内容 </div> <div class="right"> 右侧内容自适应 </div> </div>
1.float
<style> /* 清除浏览器默认边距 */ * { margin: 0; padding: 0; } .wrap { overflow: hidden; border: 1px solid red; } /* 脱离文档流 */ .left { float: left; width: 200px; height: 200px; background: purple; } .right { margin-left: 200px; background: skyblue; height: 200px; } </style>
2.使用绝对定位实现—absolute
<style> /* 清除浏览器默认边距 */ * { margin: 0; padding: 0; } .wrap { overflow: hidden; position: relative; } /* 脱离文档流 */ .left { position: absolute; left: 0; top: 0; width: 200px; height: 200px; background: purple; } .right { margin-left: 200px; background: skyblue; height: 200px; } </style>
3.使用表格布局—table
<style> /* 清除浏览器默认边距 */ * { margin: 0; padding: 0; } /* 表格布局 */ .wrap { display: table; width: 100%; } .left { display: table-cell; width: 200px; height: 200px; background: purple; } .right { display: table-cell; background: skyblue; height: 200px; } </style>
4.使用calc函数
<style> /* 清除浏览器默认边距 */ * { margin: 0; padding: 0; } /* 双float */ .wrap { overflow: hidden; } .left { float: left; width: 200px; height: 200px; background: purple; } .right { float: left; background: skyblue; height: 200px; width: calc(100% - 200px); } </style>
5.使用inline-block和calc()函数
<style> /* 清除浏览器默认边距 */ * { margin: 0; padding: 0; } /* 双float */ .wrap { overflow: hidden; width: 100%; font-size: 0; } .left { display: inline-block; width: 200px; height: 200px; background: purple; font-size: 20px; } .right { display: inline-block; background: skyblue; height: 200px; width: calc(100% - 200px); font-size: 20px; } </style>
6.使用弹性布局—flex
<style> /* 清除浏览器默认边距 */ * { margin: 0; padding: 0; } .wrap { display: flex; } .left { height: 200px; background: purple; width:100px; } .right { background: skyblue; height: 200px; flex: 1; } </style>