话不多说直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
/*1-1s 定位法*/
/*.one{
position: relative;
}
.one-left{
position: absolute;
width: 200px;
height: 500px;
background: blue;
}
.one-right{
margin-left:200px;
height: 300px;
background: red;
}*/
/*1-1e*/
/*1-2s 双inline-block+width的calc属性*/
/*.one{
font-size: 0;
}
.one-left{
display: inline-block;
vertical-align: top;
width: 200px;
height: 500px;
background: blue;
}
.one-right{
display: inline-block;
vertical-align: top;
width: calc(100% - 200px);
height: 300px;
background: red;
}*/
/*1-2e*/
/*1-3s 双float+width的calc属性*/
/*.one-left{
float: left;
width: 200px;
height: 500px;
background: blue;
}
.one-right{
float: left;
width: calc(100% - 200px);
height: 300px;
background: red;
}*/
/*1-3e*/
/*1-4s 利用flex布局*/
/*.one{
display: flex;
}
.one-left{
width: 200px;
height: 500px;
background: blue;
}
.one-right{
flex:1;
height: 300px;
background: red;
}*/
/*1-4e*/
</style>
</head>
<body>
<div class="one">
<div class="one-left"></div>
<div class="one-right"></div>
</div>
</body>
</html>