134-css-13-布局~两栏方案
两栏布局
左侧定宽，右侧自适应
1、float+calc()函数; 左侧浮动，右侧浮动、calc(100% - 左侧宽度)
2、float+margin-left; 左侧浮动，右侧margin-left左侧宽度
3、absolute+margin-left; 左侧absolute，右侧margin-left左侧宽度
4、float+overflow; 左侧浮动，右侧overflow:hidden(BFC)
5、absolute; 左侧absolute，右侧absolute、left左侧宽度
6、百分比; 左侧百分比，右侧百分比(行内块或者浮动)
7、flex; 父级flex,右侧flex:1
8、grid; 父级grid、grid-template-columns: auto 1fr;
1、float+calc()函数
.left {
float: left;
}
.right {
float: left;
width: calc(100% - 200px); /* 宽度减去左列的宽度 */
}
2、float+margin-left
.left {
float: left;
}
.right {
margin-left: 200px; /* 通过外边距的方式使该容器的左边有200px */
}
3、absolute+margin-left
.left {
position: absolute; /* 开启定位脱离文档流 */
}
.right {
margin-left: 200px; /* 通过外边距的方式使该容器的左边有200px */
}
4、float+overflow
.left {
float: left;
}
.right {
overflow: hidden; /* 设置 overflow会创建一个BFC 完成自适应 */
}
5、absolute
.left {
position: absolute;
}
.right {
position: absolute;
left: 200px; /* 定位间隔左侧的宽的200px */
}
6、百分比
.left {
display:inline-block;
width:50%;
}
.right {
display:inline-block;
width:50%;
}
7、flex
.parent {
display:flex;
width:50%
}
.right {
flex:1; /* flex: 1; 表示 flex-grow: 1; 即该项占所有剩余空间 */
}
8、grid
.parent {
display: grid;
grid-template-columns: 100px auto; /*设定2列就ok了,auto换成1fr也行*/
}
.parent {
display: grid;
grid-template-columns: auto 1fr; /* 将其划分为两行，其中一列由本身宽度决定， 一列占剩余宽度*/
}