左边固定宽 右边自适应布局
<!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>
*{
margin:0;
padding:0;
}
.main{
height:400px;
width:100%;
}
/*
.main > div{
float:left;
height:100%;
}
.right{
width:100%;
padding-left:200px;
box-sizing: border-box;
background:#ff0;
}
.left{
float:left;
width:200px;
margin-left:-100%;
background:#f00;
}*/
/*定位*/
/*.main{
position: relative;
}
.right{
width:100%;
height:100%;
padding-left:200px;
box-sizing: border-box;
background:#ff0;
}
.left{
position: absolute;
width:200px;
height:100%;
top: 0;
left: 0;
background:#f00;
}*/
/* flex方式 */
.left{
width:100px;
height:100%;
float:left;
background:#ff0;
}
.right{
margin-left:100px;
background:#f0f;
height:100%;
box-sizing: border-box;
margin
}
</style>
</head>
<body>
<div class="main">
<div class="left">12222</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores quia reprehenderit debitis sit eveniet perspiciatis, placeat facere quam, adipisci consectetur magnam eos. Ullam voluptatem error vel. Odio ipsum, neque tempora nulla repellat dignissimos quis distinctio? Laborum cum quidem modi saepe, dolores maiores totam, excepturi placeat eaque itaque inventore cupiditate dolore.
</div>
</div>
</body>
</html>
