您的位置 首页 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就会上移,造成三栏布局的效果(前提是高度相同)

优点:兼容性高

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

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

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

网站地图