码迷,mamicode.com
首页 > 其他好文 > 详细

三栏布局 左右固定 中间自适应

时间:2016-11-24 14:17:38      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:恢复   属性   idt   container   bsp   技术分享   span   整理   不可用   

---恢复内容开始---

传说中的双飞燕布局?好吧

 

预期效果。

技术分享

 

左右两侧 固定像素100px,中间自适应剩余区域

 

1. 左float + 右float + 中 设为BFC(overflow:hidden)

注意不可用clear属性,此外 main区域需要位于left right之后

HTML结构

        <div class="left"></div>
        <div class="right"></div>
        <div class="main">content area</div>

CSS

    .container {
        height:100%;

        .left {
            float: left;
            height: 100%;
            width:100px;
            background-color:lightblue;
        }
        .right {
            float: right;
            height: 100%;
            width:100px;
            background-color:lightgreen;
        }
        .main {
            height:100%;
            overflow:hidden;
            background-color:lightpink;
        }
    }

 

 2. 左absolute + 右absolut + 中margin

HTML结构 left right 和 main,顺序可以随意调换

    .container {
        height:100%;
        position:relative;

        .left {
            position:absolute;
            left:0;
            top:0;
            height: 100%;
            width:100px;
            background-color:lightblue;
        }
        .right {
            position:absolute;
            right:0;
            top:0;
            height: 100%;
            width:100px;
            background-color:lightgreen;
        }
        .main {
            height:100%;
            margin:0 100px;
            background-color:lightpink;
        }
    }

 3. 左 margin-left负值 + 右 margin-left负值 + 中包裹一层

 

        <div class="main">
            <div class="content">content area</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
        .left {
            float: left;
            width: 100px;
            height: 100%;
            background-color: lightblue;
            margin-left:-100%;
        }
        .right {
            float: left;
            height: 100%;
            width: 100px;
            background-color: lightgreen;
            margin-left:-100px;
        }
        .main {
            width: 100%;
            height: 100%;
            float: left;

            .content {
                margin:0 110px;
                background-color:lightpink;
                height:100%;
            }
        }

 

 有关于margin负值的问题,之后再整理吧

 

四. 中margin + 左float + 右float

  和第一种方法类似,但是main需要位于 左右两栏之后。不然的话,main块先行占据了第一列,左右两栏只能在下方布局。

  此外,要千万注意clear属性

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main">content area</div>
    </div>
    .container {
        .left {
            float: left;
            width: 100px;
            height: 100%;
            background-color: lightblue;
        }
        .right {
            float: right;
            width: 100px;
            height: 100%;
            background-color: lightgreen;
        }
        .main {
            margin:0 100px;
            background-color:lightpink;
            height:100%;
        }
    }

 

 

 

 

 

 

 

 

 

 

 

 

---恢复内容结束---

三栏布局 左右固定 中间自适应

标签:恢复   属性   idt   container   bsp   技术分享   span   整理   不可用   

原文地址:http://www.cnblogs.com/yoxiniao/p/6089783.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!