左侧固定，右侧自适应
思路：让左右都在同一行，再让右边自适应。
双inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两栏布局</title>
<style>
.wrap{
width:100%;
font-size: 0;
}
.left{
font-size: 18px;
height:100px;
width:100px;
background-color: green;
}
.right{
font-size: 18px;
height:100px;
background-color: hotpink;
width:calc(100% - 100px);
}
.wrap,.right,.left{
display:inline-block;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
双float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两栏布局</title>
<style>
.wrap{
width:100%;
}
.left{
height:100px;
width:100px;
background-color: green;
}
.right{
height:100px;
background-color: hotpink;
width:calc(100% - 100px);
}
.wrap,.right,.left{
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
float+margin-left
让left浮动，right移动left的宽度就行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两栏布局</title>
<style>
.wrap{
width:100%;
}
.left{
height:100px;
width:100px;
background-color: green;
float: left;
}
.right{
height:100px;
background-color: hotpink;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
absolute+margin-left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两栏布局</title>
<style>
.wrap{
width:100%;
position: relative;
}
.left{
height:100px;
width:100px;
background-color: green;
position: absolute;
}
.right{
height:100px;
background-color: hotpink;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
float+BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两栏布局</title>
<style>
.wrap{
width:100%;
}
.left{
height:100px;
width:100px;
background-color: green;
float:left;
}
.right{
height:100px;
background-color: hotpink;
overflow:auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>两栏布局</title>
<style>
.wrap{
width:100%;
display: flex;
}
.left{
height:100px;
width:100px;
background-color: green;
flex:0 0 auto;
}
.right{
height:100px;
background-color: hotpink;
flex:1 1 auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
