办法一：浮动
<!DOCTYPE html>
<html>
<head>
<style>
.left{
float:left;
width:200px;
height: 400px;
background: blue;
}
.right{
float: right;
width: 200px;
height: 400px;
background: red;;
}
.center{
height: 400px;
background: yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
右边
</div>
<div class="right">
左边
</div>
<div class="center">
两头
</div>
</div>
</body>
</html>办法二：flex
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper{display: flex;}
.left,.right{
height: 400px;
width: 200px;
}
.left{background: blue;}
.right{background: red;}
.center{
flex:1;
height: 400px;
background: yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
右边
</div>
<div class="center">
两头
</div>
<div class="right">
左边
</div>
</div>
</body>
</html>办法三：相对布局
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper{position: relative;}
.left,.right,.center{
position: absolute;
height: 400px;
}
.left{
left:0;
background: blue;
width: 200px;
}
.right{
right: 0;
background: red;
width: 200px;
}
.center{
left: 200px;
right: 200px;
background: yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
右边
</div>
<div class="center">
两头
</div>
<div class="right">
左边
</div>
</div>
</body>
</html>办法四：table 布局
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper{
display: table;
width: 100%;
}
.left,.right,.center{
display: table-cell;
height: 400px;
}
.left{
background: blue;
width: 200px;
}
.right{
background: red;
width: 200px;
}
.center{background: yellow;}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
右边
</div>
<div class="center">
两头
</div>
<div class="right">
左边
</div>
</div>
</body>
</html>办法五：grid 布局
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper{
display: grid;
width: 100%;
grid-template-rows: 400px;
grid-template-columns: 200px auto 200px;
}
.left{background: blue;}
.right{background: red;}
.center{background: yellow;}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
右边
</div>
<div class="center">
两头
</div>
<div class="right">
左边
</div>
</div>
</body>
</html>