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

Posted 李太浪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三栏布局 左右固定 中间自适应相关的知识,希望对你有一定的参考价值。

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

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

 

预期效果。

 

左右两侧 固定像素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%;
        }
    }

 

 

 

 

 

 

 

 

 

 

 

 

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

以上是关于三栏布局 左右固定 中间自适应的主要内容,如果未能解决你的问题,请参考以下文章

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

三栏布局,中间自适应,左右固定实现方法

三栏布局-------上下宽高固定,中间自适应

记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。

三栏结构布局技巧,顶了

三栏布局