css3中flex与grid实现三栏并排显示-网页编程网

当前位置：主页 >> DIV+CSS >> 正文

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

阅读：1969 输入：2022-07-28 14:48:51

分别用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>

上一篇：js事件绑定与解绑，判断息屏与后台事件
下一篇：nginx、php与mysql等access日志位置

相关阅读: javascript实现的鼠标悬浮当前td单元格变色效果; css3定高不定宽overflow创建BFC环境实现拉帘式遮罩相册; css3实验登录页面