目录
<div class="father">
<div class="left">左边自适应</div>
<div class="right">右边自适应</div>
</div>
一、左边定宽 右边自适应
实现效果：
1.浮动
.left {
width: 100px;
background-color: rebeccapurple;
float: left;
}
.right {
width: calc(100%-100px);
background-color: green;
}
2.利用浮动+margin
.left {
width: 100px;
background-color: rebeccapurple;
float: left;
}
.right {
background-color: green;
margin-left: 100px;
}
3.定位+margin
.father {
position: relative;
}
.left {
position: absolute;
width: 100px;
left: 0;
background-color: rebeccapurple;
}
.right {
background-color: green;
margin-left: 100px;
}
4.flex布局
.father {
display: flex;
}
.left {
width: 100px;
background-color: rebeccapurple;
}
.right {
flex: 1;
/* flex: 1可以让其填充剩余的空间，以达到拉伸的效果 */
background-color: green;
}
5.table 布局
.father {
width: 100%;
display: table;
}
.left {
display: table-cell;
width:300px;
background-color: rebeccapurple;
}
.right {
display: table-cell;
background-color: green;
}
二、左右成比自适应
1:1
1flex布局
.father {
display: flex;
}
.left {
width: 200px;
height: 200px;
background-color: rebeccapurple;
flex: 1;
}
.right {
width: 200px;
height: 200px;
background-color: green;
flex: 1;
/* 放大且缩小并等分所有空间 */
/* flex：1等于flex-grow: 1、flex-shrink: 1、flex-basic: 0% */
}
table布局
.father {
width: 100%;
display: table;
}
.left {
display: table-cell;
height: 200px;
background-color: rebeccapurple;
}
.right {
display: table-cell;
height: 200px;
background-color: green;
}
1:2
flex布局
.father {
display: flex;
}
.left {
width: 200px;
height: 200px;
background-color: rebeccapurple;
flex: 1;
}
.right {
width: 200px;
height: 200px;
background-color: green;
flex: 2;
/* flex：1等于flex-grow: 2、flex-shrink: 2、flex-basic: 0% */
}
等分所有空间，宽度比左：右=1:2
flex 布局的默认主轴方向为 row ，所以 flex-basis 属性 默认是控制元素的 width