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

Posted 2020-08-20 李太浪

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

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

 

预期效果。

 

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

 

 

 

 

 

 

 

 

 

 

 

 

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