两栏布局(左侧固定 + 右侧自适应布局)
machao07 opened this issue · comments
1、利用浮动
1)、左边元素宽度固定 ,设置向左浮动
。将右边元素的 margin-left
设为固定宽度
<div class="outer">
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
.outer {
height: 100px;
}
.left {
float: left;
width: 200px;
height: 100%;
background: lightcoral;
}
.right {
margin-left: 200px;
height: 100%;
background: lightseagreen;
}
2)、左边元素宽度固定 ,设置向左浮动。右侧元素设置 overflow: hidden;
右边就触发了 BFC
.outer {
height: 100px;
}
.left {
float: left;
width: 200px;
height: 100%;
background: lightcoral;
}
.right {
overflow: auto;
height: 100%;
background: lightseagreen;
}
2、利用flex
左边元素固定宽度,右边的元素设置
flex: 1
.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
height: 100%;
background: lightcoral;
}
.right {
flex: 1;
height: 100%;
background: lightseagreen;
}
3、利用绝对定位
1)、父级元素设为相对定位
。左边元素 absolute
定位,宽度固定。右边元素的 margin-left
的值设为左边元素的宽度值
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 200px;
height: 100%;
background: lightcoral;
}
.right {
margin-left: 200px;
height: 100%;
background: lightseagreen;
}
2)、父级元素设为相对定位
。左边元素宽度固定,右边元素 absolute
定位, left
为宽度大小,其余方向定位为 0 。
.outer {
position: relative;
height: 100px;
}
.left {
width: 200px;
height: 100%;
background: lightcoral;
}
.right {
position: absolute;
left: 200px;
top: 0;
right: 0;
bottom: 0;
height: 100%;
background: lightseagreen;
}