通过float 实现
<html>
<div class="main">
<div>left</div>
<div>right</div>
<div>main</div>
</div>
<style>
.main div {
margin: 0;
padding: 0;
height: 700px;
}
.main :nth-child(1) {
background-color: #BAC;
width: 200px;
float: left;
}
.main :nth-child(3) {
background-color: aqua;
margin: 0 100px 0 200px;
}
.main :nth-child(2) {
background-color: bisque;
width: 100px;
float: right;
}
</style>
</html>
定位实现
.main{
width: 100%;
}
.main div {
height: 700px;
position: relative;
}
.main :nth-child(1) {
background-color: #BAC;
width: 200px;
float: left;
left:0;
position:absolute;
}
.main :nth-child(3) {
background-color: aqua;
margin: 0 100px 0 200px;
}
.main :nth-child(2) {
background-color: bisque;
width: 100px;
float: right;
position:absolute;
right: 0;
}
flex实现
<html>
<div class="main">
<div>left</div>
<div>main</div>
<div>right</div>
</div>
<style>
.main{
width: 100%;
display: flex;
flex-wrap: nowrap;
}
.main div {
height: 700px;
}
.main :nth-child(1) {
background-color: #BAC;
width: 200px;
}
.main :nth-child(2) {
background-color: aqua;
flex: 1;
}
.main :nth-child(3) {
background-color: bisque;
width: 100px;
}
</style>
</html>
table实现
<html>
<div class="main">
<div>left</div>
<div>main</div>
<div>right</div>
</div>
<style>
.main{
width: 100%;
display: table;
}
.main div {
height: 700px;
}
.main :nth-child(1) {
background-color: #BAC;
width: 200px;
display: table-cell;
}
.main :nth-child(2) {
background-color: aqua;
display: table-cell;
}
.main :nth-child(3) {
background-color: bisque;
width: 100px;
display: table-cell;
}
</style>
</html>
网格布局
<html>
<div class="main">
<div>left</div>
<div>main</div>
<div>right</div>
</div>
<style>
.main{
display: grid;
grid-template-columns: 200px auto 100px;
grid-template-rows: 700px;
width: 100%;
}
.main div {
height: 700px;
}
.main :nth-child(1) {
background-color: #BAC;
width: 200px;
}
.main :nth-child(2) {
background-color: aqua;
}
.main :nth-child(3) {
background-color: bisque;
width: 100px;
}
</style>
</html>
calc布局
<html>
<div class="main">
<div>left</div>
<div>main</div>
<div>right</div>
</div>
<style>
.main{
width: 100%;
}
.main div {
height: 700px;
float: left;
}
.main :nth-child(1) {
background-color: #BAC;
width: 200px;
}
.main :nth-child(2) {
background-color: aqua;
width: calc(100% - 300px);
}
.main :nth-child(3) {
background-color: bisque;
width: 100px;
}
</style>
</html>
圣杯布局
<html>
<div class="main">
<div>main</div>
<div>left</div>
<div>right</div>
</div>
<style>
.main{
margin-right: 100px;
}
.main div {
height: 700px;
float: left;
}
.main :nth-child(2) {
background-color: #BAC;
width: 200px;
margin-left: -100%;
position: relative;
}
.main :nth-child(1) {
background-color: aqua;
width:100%;
}
.main :nth-child(3) {
background-color: bisque;
width: 100px;
margin-right: -100px;
}
</style>
</html>
双飞翼布局
<html>
<div class="main">
<div>main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
<style>
.main{
width: 100%;
}
.main div {
background-color: #BAC;
margin: 0 100px 0 200px;
width: calc(100% - 300px);
}
.left {
background-color: aqua;
width: 200px;
margin-left: -100%;
}
.right {
background-color: bisque;
width: 100px;
margin-left: -100px;
}
div {
float: left;
height: 500px;
}
</style>
</html>
