如何实现两栏布局、三栏布局

最新推荐文章于 2024-09-26 13:58:48 发布

噯鉬

最新推荐文章于 2024-09-26 13:58:48 发布

阅读量187

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45488764/article/details/108270015

版权

1. 两栏布局,左边定宽

	<div id="left">左边定宽</div>
    <div id="right">右边自适应</div>

第一种：


	#left {
        float: left;
        width: 200px;
        margin-right: -200px;
        height: 50%;
        background: green;
    }

    #right {
        float: left;
        margin-left: 210px;
        width: 100%;
        height: 50%;
        background: red;
    }

在这里插入图片描述

第二种：


    #left {
        width: 200px;
        height: 50%;
        position: absolute;
        background: red;
    }

    #right {
        height: 50%;
        width: 100%;
        margin-left: 200px;
        background: yellow;
    }

在这里插入图片描述

第三种：


    #left {
        width: 200px;
        background: red;
        float: left;
        height: 50%;
    }

    #right {
        width: 100%;
        margin-left: 210px;
        background: pink;
        height: 50%;
    }

在这里插入图片描述

1. 三栏布局,中间自适应

	<div class="container">
        <div class="middle">
            中间
        </div>
        <div class="left">
            左侧
        </div>
        <div class="right">
            右侧
        </div>
    </div>
    <div class="footer">
        尾部
    </div>

第1种：圣杯布局

    .container {
        padding: 0 220px 0 220px;
        overflow: hidden;
    }

    .left,
    .middle,
    .right {
        position: relative;
        float: left;
        // 多列等高
        margin-bottom: -2000px;
        padding-bottom: 2000px;
    }

    .left {
        margin-left: -100%;
        left: -200px;
        width: 200px;
        background: red;
    }

    .right {
        margin-left: -220px;
        right: -220px;
        width: 220px;
        background: green;
    }

    .middle {
        width: 100%;
        background: blue;
    }

在这里插入图片描述

第2种：通过positon定位实现三栏布局中间自适应

	.container {
        position: relative;
    }

    .left {
        width: 200px;
        background-color: blue;
        position: absolute;
        left: 0;
        top: 0;
    }

    .right {
        width: 200px;
        background-color: rgb(197, 21, 74);
        position: absolute;
        right: 0;
        top: 0;
    }

    .middle {
        background-color: rgb(48, 201, 1);
        margin-left: 200px;
        margin-right: 200px;
    }

在这里插入图片描述

第3种：浮动法

	.left {
        background-color: rgb(33, 36, 204);
        width: 200px;
        float: left;
    }

    .right {
        background-color: rgb(25, 179, 206);
        width: 200px;
        float: right;
    }

    .middle {
        background-color: rgb(48, 201, 1);
        margin-left: 200px;
        margin-right: 200px;
    }

在这里插入图片描述

第4种：margin负值法(双飞翼)

    <div id="main">
        <div class="content">1</div>
    </div>
    <div id="left">1</div>
    <div id="right">1</div>

#main {
        float: left;
        width: 100%;
    }

    .content {
        margin: 0 200px;
        height: 100%;
        background: red;
    }

    #left {
        float: left;
        width: 200px;
        margin-left: -100%;
        background: blue;
    }

    #right {
        float: left;
        width: 200px;
        margin-left: -200px;
        background: green;
    }