常见页面开发中，特别是后台系统，页面中会固定某一区域（而另一区域进行自适应，左边功能列表展示，右边
展示当前选中功能的具体信息），在页面的布局中，不需要针对某一个布局进行特别的研究，掌握布局使用的技
术之后，只需要进行对其相互的嵌套和组合即可满足大部分的开发场景。
一、左固定，右自适应（如果方向相反，对应值设置为相反即可）
HTML
<body>
<div class='left'>left</div>
<div class='right'>right</div>
</body>
CSS
/*方法一
display:inline-block+calc
*/
div{
display:inline-block;
}
.left {
width: 200px;
background: #eee;
}
.right {
width: calc( 100% - 201px);/*CSS3新属性*/
background: red;
}
方法一.png
/*方法二
display:flex
*/
body {
height: 100%;
display: flex;
}
.left {
min-width: 300px;（固定宽度设置为最低宽度即可）
background: #eee;
}
.right {
width: 100%;
background: red;
}
方法二.png
/*方法三
display:flex + flex
*/
body {
height: 100%;
display: flex;
align-items: flex-satrt;
}
.left {
width: 300px;/*不需要设置最低宽度*/
background: #eee;
flex: 0 0 auto;
}
.right {
width: 100%;
background: red;
flex: 1 1 auto;
}
方法三.png
/*方法四
position:absolute;
*/
div {
height: 100%;
}
.left {
width: 300px;
background: #eee;
}
.right {
width: 100%;
background: red;
position: absolute;
top: 0;
left: 300px;
}
方法四.png
网友评论