css实现两列布局，一列固定宽度，一列宽度自适应方法
css实现两列布局，一列固定宽度，一列宽度自适应方法
固定宽度区浮动，自适应区不设宽度而设置 margin
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 固定宽度区浮动，自适应区不设宽度而设置 margin</title>
</head>
<style>
.sidebar {
float: right;
width: 200px;
height:300px;
background-color:cornflowerblue;
color:#fff;
}
.content {
margin-right: 200px;
height:300px;
background-color:coral;
color:#fff;
}
</style>
<body>
<div class="wrap">
<div class="sidebar" >固定宽度区</div>
<div class="content" >自适应区</div>
</div>
</body>
</html>
float与margin配合使用
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> float与margin配合使用</title>
</head>
<style>
.content {
margin-left: -200px;
float: left;
width: 100%;
height:300px;
background-color:coral;
color:#fff;
}
.content div{
margin-left:200px;
}
.sidebar {
float: right;
width: 200px;
height:300px;
background-color: cornflowerblue;
color:#fff;
}
</style>
<body>
<div class="wrap">
<div class="content" >
<div>
自适应区
</div>
</div>
<div class="sidebar" >固定宽度区</div>
</div>
</body>
</html>
固定宽度区使用绝对定位，自适应区设置margin
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 固定宽度区使用绝对定位，自适应区设置margin</title>
</head>
<style>
.wrap{
position:relative;
}
.content {
margin-right:200px;
height:300px;
background-color:coral;
color:#fff;
}
.sidebar {
position:absolute;
width:200px;
right:0;
top:0;
height:300px;
background-color:cornflowerblue;
color:#fff;
}
</style>
<body>
<div class="wrap">
<div class="content" >自适应区</div>
<div class="sidebar">固定宽度区</div>
</div>
</body>
</html>
使用display:table实现
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 使用display:table实现</title>
</head>
<style>
.wrap{
display:table;
width:100%;
}
.content {
display:table-cell;
height:300px;
background-color:coral;
color:#fff;
}
.sidebar {
width:200px;
display:table-cell;
height:300px;
background-color:cornflowerblue;
color:#fff;
}
</style>
<body>
<div class="wrap">
<div class="content">自适应区</div>
<div class="sidebar">固定宽度区</div>
</div>
</body>
</html>
