本文介绍了三种实现左右布局的方法：浮动方法、绝对定位法及弹性盒布局，并提供了代码示例，适用于前端开发人员学习。
左右布局：左边定宽、右边自适应，
1.1浮动方法，使第一个div浮动起来脱离文档流，下面的div自动向上
先看代码
<style>
body{margin:0;} //为了统一布局，去掉了浏览器自带body的margin值
.left{ width:200px; float:left; height:400px;; background:#99F;}
.main{ height:400px; background:#CCC;}
</style>
<body>
<div class="left">左侧</div>
<div class="main">主要</div>
</body>
1.2 绝对定位法
此方法的原理大体就是将左侧的块元素设置为position:absolute;右侧默认宽度，且将margin-left的值设为200px，即为左栏的宽度。
<style>
body{margin:0;}
.left{ position:absolute; top:0; width:200px; height:400px; background:#99F; left:0;}
.main{ height:400px; background:#CCC; margin-left:200px;}
</style>
<body>
<div class="left">左侧</div>
<div class="main">主要</div>
</body>
1.3弹性盒
display：flex; 设置为弹性盒子，其子元素可以通过设置 flex 的数值来控制所占空间的比例。
body{margin:0; display: flex}
.left{ width:200px; height:400px; background:#99F; left:0;}
.main{ height:400px; background:#CCC; flex: 1}
</style>
<body>
<div class="left"></div>
<div class="main"></div>
</body>
2、左右定宽中间自适应宽度
1.1浮动方法，使第一个div浮动起来脱离文档流，下面的div自动向上
<style>
body{margin:0;}
.left{ width:200px; float:left; height:400px;; background:#99F;}
.right{ width:200px; float:right; height:400px; background:#39F;}
.main{ height:400px; background:#CCC;}
</style>
<body>
<div class="left">左</div>
<div class="right">右</div>
<div class="main">中</div>
2.2 绝对定位法
<style>
body{ margin:0;}
.left,.right{ position:absolute; top:0; width:200px; height:400px;}
.left{ background:#99F; left:0;}
.right{ background:#39F; right:0;}
.main{ height:400px; background:#CCC; margin:0 200px;}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</body>
<style>
1.3弹性盒
display：flex; 设置为弹性盒子，其子元素可以通过设置 flex 的数值来控制所占空间的比例。
body{margin:0; display: flex}
.left{ width:200px; height:400px; background:#99F; left:0;}
.main{ height:400px; background:#CCC; flex: 1}
.right{ width:200px; height:400px; background:#99F; left:0;}
</style>
<body>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</body>
扫一扫
633
到【灌水乐园】发言
