CSS 两栏布局
CSS 两栏布局
左栏宽度固定，右栏自适应
1. float + margin-left
左侧使用 float ，右侧 margin-left
原理：因为 float 就脱离文档流了，右侧会挤到左侧的位置上，所以需要 margin-left。margin-left要等于 float 的宽度。
<style>
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
div { height: 200px; }
.left { width: 300px; float: left; background: blue; }
.right { margin-left: 300px; background: red; }
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
2. float + BFC
左侧使用 float，右侧 BFC （如：overflow: hidden）
原理：BFC区域不会与 float box 重叠。
<style>
div { height: 300px; }
.left { width: 300px; float: left; background: blue; }
.right { overflow: hidden; background: red; }
</style>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
3. Flex布局
<style>
html, body { height: 100%; margin: 0; }
div { height: 300px; }
.container { display: flex; }
.left { flex: 0 0 200px; background: blue; }
.right { flex: 1 0 auto; background: red; }
</style>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSS 文章被收录于专栏
CSS
