先来看一下最终效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>左侧固定 右侧自适应</title>
<style>
.con{
height:120px;
background:#ccc;
margin-bottom:20px;
}
.con_l{
width:200px;
height:80%;
background:palegreen;
}
.con_r{
height:100%;
background:peru;
}
/* 1、float + bfc */
.con1_l{
float:left;
}
.con1_r{
overflow: hidden;
}
/* 2 float + margin-left*/
.con2_l{
float:left;
}
.con2_r{
margin-left:200px;
}
/* 3 float + padding-left */
.con3_l{
float:left;
}
.con3_r{
padding-left:200px;
}
.con3_r_con{
height:100%;
background:palevioletred;
}
/* 4 position */
.con4{
position:relative;
}
.con4_l{
position:absolute;
}
.con4_r{
margin-left:200px;
}
/* 5 calc */
.con5_l{
float:left;
}
.con5_r{
width:calc(100% - 200px);
float:left;
}
/* 6 table-cell */
.con6{
display:table;
}
.con6_l,.con6_r{
display:table-cell;
}
/* 7 flex */
.con7{
display:flex;
}
.con7_r{
flex-grow:1;
}
/* 8 grid网格布局 */
.con8{
display:grid;
}
.con8_l{
background:palevioletred;
grid-column:1;
}
.con8_r{
background:plum;
grid-column:2;
}
</style>
</head>
<body>
<!-- 1、float + bfc -->
<div class="con">
<div class="con_l con1_l"></div>
<div class="con_r con1_r">1、左侧元素浮动,右侧元素添加overflow:hidden,触发bfc,bfc的区域不会与float的元素重叠</div>
</div>
<!-- 2、float + margin-left -->
<div class="con">
<div class="con_l con2_l"></div>
<div class="con_r con2_r">2、左侧元素浮动,右侧元素添加margin-left,值为左侧元素的宽度</div>
</div>
<!-- 3、float + padding-left -->
<div class="con">
<div class="con_l con3_l"></div>
<div class="con_r con3_r">
<div class="con3_r_con">3、左侧元素浮动,右侧元素添加子元素,父元素添加padding-left</div>
</div>
</div>
<!-- 4、position -->
<div class="con con4">
<div class="con_l con4_l"></div>
<div class="con_r con4_r">4、左侧元素position定位,0px 0px。右侧元素margin-left:200px;</div>
</div>
<!-- 5、css3 calc函数 -->
<div class="con">
<div class="con_l con5_l"></div>
<div class="con_r con5_r">5、使用width:calc(100%-200px)</div>
</div>
<!-- 6、table-cell表格布局 -->
<div class="con con6">
<div class="con_l con6_l"></div>
<div class="con_r con6_r">6、使用table-cell表格布局,宽度会被内容撑开。如果宽度不够的话,不会充满浏览器的宽</div>
</div>
<!-- 7、flex -->
<div class="con con7">
<div class="con_l con7_l"></div>
<div class="con_r con7_r">7、使用flex布局</div>
</div>
<!-- 8、grid 网格布局 -->
<div class="con con8">
<div class="con8_l">左边左边左边左边左边左边左边左边</div>
<div class="con8_r">8、使用grid 网格布局</div>
</div>
</body>
</html>