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

最新推荐文章于 2024-12-04 20:35:30 发布

weixin_34174132

最新推荐文章于 2024-12-04 20:35:30 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yoxiniao/p/6089783.html

本文介绍了四种实现网页双飞燕布局的方法，包括使用浮动、绝对定位、负边距及组合方式，每种方法都提供了HTML结构和CSS样式代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

预期效果。

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