css的两栏布局是比较经典的布局之一，一般是左（右）边定宽，右（左）边自适应。
实现的方式也比较多，今天主要介绍3种。
1.浮动方法，使第一个div浮动起来脱离文档流，下面的div自动向上
<body>
<div class="left">左边</div>
<div class="right">右边</div></body>
.left {
width: 200px;
height: 400px;
background: yellow;
float: left;
}
.right{
height: 400px;
background: #0000FF;
}
2.绝对定位法
此方法的原理是将左侧的div设置为position:absolute，右侧默认宽度，并将margin-left设置为和左侧div一样宽（如果要留间隙，可以大于左侧div宽度）
<body>
<div class="left">左边</div>
<div class="right">右边</div>
</body>
原文地址：https://www.cnblogs.com/ronyjay/p/8794833.html
时间： 2024-10-31 13:19:53