这里写自定义目录标题
双列布局
双列布局就是页面分为左右两侧,左边宽度确定,右侧自适应
1. float 浮动
- 父元素形成BFC,消除子元素浮动带来的影响。父元素添加 overflow:hidden;
- 左边元素 设置float:left向左浮动,指定宽度 width:100px;
- 右侧元素 使用padding-left:100px 隔开左侧元素
.container{
border: 3px solid black;
overflow: hidden;
}
.left{
border: 3px solid blue;
float: left;
width:100px;
}
.right{
border: 3px solid red;
padding-left: 100px ;
}
2. 绝对定位
- 父元素: 设置为 相对定位,提供对照
- 左边元素 : 设置绝对定位 设置宽度 靠左边
- 右边元素: 设置绝对定位 设置左边距离,值为左边元素宽度,右边距离为0,这是为了宽度自适应
.container{
border: 3px solid black;
position: relative;
}
.left{
border: 3px solid blue;
position: absolute;
width:100px;
left:0;
}
.right{
border: 3px solid red;
position: absolute;
left:100px;
right:0;
}
3. flex 弹性盒
- 父元素: 设置为弹性盒 子元素会变成一行排列
- 左边元素: 设置宽度
- 右边元素: 设置弹性系数 flex:1; 默认占满盒子所有剩余空间
.container{
border: 3px solid black;
display: flex;
}
.left{
border: 3px solid blue;
width:100px;
}
.right{
border: 3px solid red;
flex:1;
}
4. grid 网格
父元素: 设置display:grid
设置grid-template-columns: 100px 1fr; 固定第一列宽度为100px 第二列自动占满剩余空间
.container{
border: 3px solid black;
display: grid;
grid-template-columns: 100px 1fr;
}
.left{
border: 3px solid blue;
}
.right{
border: 3px solid red;
}