css3中flex与grid实现三栏并排显示

2022-07-28 网页编程网 网页编程网

分别用float left与css3中的flex与grid实现三栏并排显示，运行代码时，删除其它无用的代码看效果。

实现三栏布局，法1<br />
<style>
.left{
width:100px;
height:100px;
background:green;
}
.left{
width:100px;
height:100px;
background:green;
}
.center{
width:500px;
height:100px;
background:pink;
}
.right{
width:100px;
height:100px;
background:yellow;
}
.wrapper > *{
float:left;
}

</style>
<div class="wrapper">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<hr />
法2<br />
<style>
.flex{
display:flex;
}
.fleft{
width:100px;
height:100px;
background:green;
order:1;
}
.fcenter{
flex-grow: 1;
width:100px;
height:100px;
background:pink;
order:1;
}
.fright{
width:100px;
height:100px;
background:yellow;
order:3;
}
</style>
<div class="flex">
<div class="fleft"></div>
<div class="fcenter"></div>
<div class="fright"></div>
</div>

阅读原文

阅读 1953

123 显示电脑版