一、定位布局
html
<div class="demo">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
复制代码
css
.demo{
position:relative;
width:100%;
height:300px;
}
.left,.right{
position:absolute;
top:0;
width:100px;
height:300px;
}
.left{
left:0;
background:red;
}
.right{
right:0;
background:blue;
}
.center{
padding:0 100px;
height:300px;
background:green;
}
复制代码
二、浮动布局
html(center要放在最后)
<div class="demo">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
复制代码
css
.demo{
width:100%;
height:300px;
}
.left,.right{
width:100px;
height:300px;
}
.left{
float:left;
background:red;
}
.right{
float:right;
background:blue;
}
.center{
padding:0 100px;
height:300px;
background:green;
}
复制代码
三、flex布局
html
<div class="demo">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
复制代码
css
.demo{
width:100%;
height:300px;
display:flex;
}
.left,.right{
width:100px;
height:300px;
}
.left{
background:red;
}
.right{
background:blue;
}
.center{
padding:0 100px;
height:300px;
background:green;
flex:1;
}
复制代码
四、gird布局
html
<div class="demo">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
复制代码
css
.demo{
width:100%;
height:300px;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 100px auto 100px;
}
.left,.right{
width:100px;
height:300px;
}
.left{
background:red;
}
.right{
background:blue;
}
.center{
padding:0 100px;
height:300px;
background:green;
}
复制代码
总结
除了以上四种,还有双飞燕、圣杯布局。大家还有什么其他的方法嘛