简单！看完就会的Css三栏布局。
一、定位布局
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;
}总结
除了以上四种，还有双飞燕、圣杯布局。大家还有什么其他的方法嘛
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-04-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录