您的位置 首页 css教程

css如何实现三栏布局

实现方法:

一、float浮动

<section class='layout float'>         <style>             .layout.float .left-right-center{                 height: 100px;             }             .layout.float .left{                 float: left;                 width: 300px;                 background-color: red;             }             .layout.float .right{                 float: right;                 width: 300px;                 background-color: blue;             }             .layout.float .center{                 background-color: yellow;             }         </style>         <article class="left-right-center">             <div class="left"></div>             <div class="right"></div>             <div class="center">我是中间的自适应元素--浮动</div>         </article>     </section>

原理:左右两个div由于浮动脱离了文档流,center就会上移,造成三栏布局的效果(前提是高度相同)

优点:兼容性高

缺点:需要清除浮动来防止影响其他元素

如果高度不固定,中间的内容会被撑开,左右两边不会一起撑开

文章来源:火云技术网

文章标题:css如何实现三栏布局

文章地址:https://www.pyhw.net/30347_css%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e4%b8%89%e6%a0%8f%e5%b8%83%e5%b1%80.html

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图