左列定宽,右列自适应
利用float+margin
HTML代码
<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>
css代码
#left {
background-color: #f00;
float: left;
width: 100px;
height: 500px;
}
#right {
background-color: #0f0;
height: 500px;
margin-left: 100px; /*设置间隔，大于等于#left的宽度*/
}
优点：代码简单；容易理解；兼容性好
缺点：#left的宽度和#right的margin-left需要对应且固定
利用float+margin(fix)
HTML代码
<body>
<div id="left">左列定宽</div>
<div id="right-fix">
<div id="right">右列自适应</div>
</div>
</body>
CSS代码
#left {
background-color: #f00;
float: left;
width: 100px;
height: 500px;
}
#right-fix {
float: right;
width: 100%;
margin-left: -100px; /*正值大于或等于#left的宽度,才能上移一行*/
}
#right{
margin-left: 100px; /*大于或等于#left的宽度,才不会遮挡#left*/
background-color: #0f0;
height: 500px;
}
优点：代码较简单；兼容性好
缺点：相比（1）的方法，多了一个div，多写了一些代码；不容易理解；margin需要对应好
使用float+overflow
HTML代码
<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>
CSS代码
#left {
background-color: #f00;
float: left;
width: 100px;
height: 500px;
}
#right {
background-color: #0f0;
height: 500px;
overflow: hidden; /*触发bfc达到自适应*/
}
优点：代码简单；容易理解；无需关注定宽的宽度，利用bfc达到自适应效果
缺点：#right设置margin-left需要大于#left的宽度才有效，或者直接给#left设置margin-right
使用table实现
THML代码
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
CSS代码
#parent{
width: 100%;
display: table;
height: 500px;
}
#left {
width: 100px;
background-color: #f00;
}
#right {background-color: #0f0;}
/*利用单元格自动分配宽度*/
#left,#right{display: table-cell;}
优点：代码简单；容易理解；适用于宽度高度未知情况；兼容性好（ie8+）
缺点：margin失效；设置间隔比较麻烦；设置tabl-cell的元素，宽度和高度的值设置百分比无效，需要给它的父元素设置display: table; 才生效；table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height；设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性；内容溢出时会自动撑开父元素
使用position实现
HTML代码
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
CSS代码
#parent{position: relative;} /*父相*/
#left {
position: absolute; /*子绝*/
top: 0;
left: 0;
background-color: #f00;
width: 100px;
height: 500px;
}
#right {
position: absolute; /*子绝*/
top: 0;
left: 100px; /*值大于等于#left的宽度*/
right: 0;
background-color: #0f0;
height: 500px;
}
优点：容易理解；兼容性好
代码较多；脱离文档流；左边盒子的width需要对应右边盒子的left值
使用flex实现
HTML代码
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
CSS代码
#parent{
width: 100%;
height: 500px;
display: flex;
}
#left {
width: 100px;
background-color: #f00;
}
#right {
flex: 1; /*均分了父元素剩余空间*/
background-color: #0f0;
}
优点：简单灵活；功能强大
缺点：PC端兼容性不好，移动端（Android4.0+）
使用Grid实现
HTML代码
<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>
CSS代码
#parent {
width: 100%;
height: 500px;
display: grid;
grid-template-columns: 100px auto; /*设定2列就ok了,auto换成1fr也行*/
}
#left {background-color: #f00;}
#right {background-color: #0f0;}
优点：灵活划分网格区域；新型布局利器，适用于页面三维布局
缺点：兼容性不好，移动端（Android5.0+）
来源：https://github.com/Sweet-KK/css-layout
作者：Sweet-KK