本篇文章主要介绍了"横向两列布局（左列固定，右列自适应）的4中实现方式"，主要涉及到实现,固定方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
横向两列布局：左列固定，右列自适应
??需要实现的效果如下图：HTML代码：
横向两列布局：左列固定，右列自适应
??需要实现的效果如下图：
HTML代码：
<DOCTYPEhtml><html><head><metacharset="UTF-8"><title>测试练习title>head><body><divclass="parent"><divclass="side">侧栏div><divclass="main">主栏div>div>body>html>
??方法一（推荐）：使用asolute属性实现，需要注意：固定宽的列的高度>自适应宽度列的高度
??CSS代码：
body{
margin:0;
padding:0;
font-size:30px;
font-weight:bold;
}.parent{
text-align:center;
line-height:200px;
}.side{
position:absolute;left:0;top:0;
width:200px;
height:200px;
background:red;
}.main{
margin-left:210px;
background:blue;
height:200px;
}
??方法二：通过设置float属性（使纵向排列的块级元素，横向排列）及margin属性（设置两列之间的宽度）
??CSS代码：
body{
margin:0;
padding:0;
font-size:30px;
font-weight:bold;
}.parent{
text-align:center;
line-height:200px;
}.side{
width:200px;
height:200px;
float:left;
background:red;
}.main{
height:200px;
margin-left:210px;
background:blue;
}
??方法三：使用Flex布局
??CSS代码：
