两栏布局和三栏布局的实现方法

最新推荐文章于 2025-01-21 08:06:15 发布

Yxmeimei

最新推荐文章于 2025-01-21 08:06:15 发布

阅读量1k

点赞数 25

分类专栏： css 文章标签：前端 css html

本文链接：https://blog.youkuaiyun.com/qq_63543660/article/details/142342463

版权

css 专栏收录该内容

4 篇文章

订阅专栏

两栏布局

右侧不设置宽，实现一栏自适应。

1. float + margin-left

左侧设置float，且设置宽度，右侧margin-left为左侧的宽度

<head>
    <style>
        .left{
            width: 300px;
            height: 500px;
            background-color: palegreen;
            float: left;
        }
        .right{
            margin-left: 300px;
            height: 500px;
            background-color: wheat;
        }
    </style>
</head>
<body>
    <div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

但是有一个情况

<div class="box">
   <div class="left"></div>
   <div class="right"></div>
</div>
内容

内容在盒子外，但却跑到右边去了。

这是因为使用了float浮动的原因，浮动导致元素脱离原本的文档流，导致父元素高度塌陷，其他内容快便会自动排版上去，可使用触发bfc的方式，为父元素添加BFC，防止下方元素飞到上方元素。

.box{
    overflow: hidden;
}

2. float + overflow

左侧float，并设置宽，右侧overflow：hidden，实现自适应。

此方法也会出现父元素高度塌陷的问题，所以给父元素添加overflow：hidden


    <style>
        .left{
            width: 300px;
            height: 400px;
            background-color: palegreen;
            float: left;
        }
        .right{
            height: 200px;
            overflow: hidden;
            background-color: wheat;
        }
        .box{
            overflow: hidden;
        }
    </style>

3. absolute定位

父元素设置position：relative

左侧固定宽度，右侧设置absolute，并且设置top为0，让元素上移，left为左侧固定宽度，right为0，让其能够自适应

<style>
    .left{
        width: 300px;
        height: 400px;
        background-color: palegreen;
    }
    .right{
        height: 200px;
        background-color: wheat;
        position: absolute;
        top: 0;
        left: 300px;
        right: 0;
    }
    .box{
        position: relative;
    }
</style>

4. flex布局（推荐使用）

方法较为简单

父元素设置display为flex，左侧固定宽度，右侧设置flex为1，自动填充容器

<style>
    .left{
        width: 300px;
        height: 400px;
        background-color: palegreen;
    }
    .right{
        height: 200px;
        background-color: wheat;
        flex: 1;
    }
    .box{
        display: flex;
    }
</style>

三栏布局

实现左右固定，中间自适应

当实现中间部分前置的，意思就是html中将中间部分写在最前面，可以实现中间部分优先加载

1. flex布局（推荐）

父元素设置display为flex，左右固定宽度，中间元素设置flex为1，自动填充容器。不可前置

<head>
    <style>
        .left{
            width: 300px;
            height: 400px;
            background-color: darkcyan;
        }
        .middle{
            background-color: gold;
            height: 500px;
            flex: 1;
        }
        .right{
            width: 300px;
            height: 200px;
            background-color: olivedrab;
        }
        .box{
            display: flex;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
    </div>
</body>

2. absolute + margin

父元素设置relative，左右absolute固定在两侧，left设置top和left为0，右侧设置top和right为0

中间使用margin让左右外边距为两侧固定宽度

该方法可将middle前置

    <style>
        .left{
            width: 300px;
            height: 400px;
            background-color: darkcyan;
            position: absolute;
            top: 0;
            left: 0;
        }
        .middle{
            background-color: gold;
            height: 500px;
            margin-left: 300px;
            margin-right: 200px;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: olivedrab;
            position: absolute;
            top: 0;
            right: 0;
        }
        .box{
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

3. float + margin

左右两侧设置float浮动，左侧为left，右侧为right

中间margin设置左右外边距为左右固定宽度

注意：middle元素要放在最后，因为div独占一行，前面设置浮动，后面就会尾随其上，如果middle放在第二个，那么会占一行，右边即使设置float都会在下一行显示

<head>
    <style>
        .left{
            width: 300px;
            height: 400px;
            background-color: darkcyan;
            float: left;
        }
        .middle{
            background-color: gold;
            height: 500px;
            margin-left: 300px;
            margin-right: 200px;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: olivedrab;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>
    </div>
</body>

如果middle在第二个，将会变成下图这样

4. table（不常用）

父元素设置display为table，table-layout为fixed，宽度是由自身宽度决定，而不是自动计算，并且要设置宽度，不然中间的width将会撑满全屏

左中右都设置display为table-cell，为表格单元，左右固定宽，中间width为100%，实现自适应

该方法不可实现中间元素前置

<style>
    .left{
        width: 300px;
        height: 400px;
        background-color: darkcyan;
    }
    .middle{
        background-color: gold;
        height: 500px;
        width: 100%;
    }
    .right{
        width: 200px;
        height: 200px;
        background-color: olivedrab;
    }
    .box{
        display: table;
        table-layout: fixed;
        width: 800px;
    }
    .left,.middle,.right{
        display: table-cell;
    }
</style>

5. grid网格布局

父元素设置display为grid，grid-template-columns: 左宽度 auto 右宽度

该方法不可实现中间元素前置

<style>
    .left{
        /* width: 300px; */
        height: 400px;
        background-color: darkcyan;
    }
    .middle{
        background-color: gold;
        height: 500px;
    }
    .right{
        /* width: 200px; */
        height: 200px;
        background-color: olivedrab;
    }
    .box{
        width: 800px;
        display: grid;
        grid-template-columns: 300px auto 200px;
    }
</style>

6. 圣杯布局

首先middle元素要写在第一个，然后步骤为：

给父元素设置padding-left和padding-right，空出左右栏的位置；

左中右设置浮动；

中间设置width为100%，实现自适应；

左右宽度为父元素的左右内边距padding；

左侧设置margin-left为-100%，让元素到上一行，且向左移动，与父元素左边缘对齐，然后设置定位relative，left为负的自身宽度；

右侧设置margin-left为负的自身宽度，定位relative，right为负的自身宽度


<style>
    .left{
        width: 300px;
        height: 400px;
        background-color: darkcyan;
        float: left;
        margin-left: -100%;
        left: -300px;
        position: relative;
    }
    .middle{
        background-color: gold;
        height: 500px;
        width: 100%;
        float: left;
    }
    .right{
        width: 200px;
        height: 200px;
        background-color: olivedrab;
        float: left;
        margin-left: -200px;
        position: relative;
        right: -200px;
    }
    .box{
        padding-left: 300px;
        padding-right: 200px;
    }
</style>

<body>
    <div class="box">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

7. 双飞翼布局

中间元素使用双层标签

与圣杯布局类似，左右和center设置浮动，center的width为100%，左侧设置margin-left为-100%，右侧margin-left为负的自身宽度，middle设置margin左右外边距为左右固定宽度，且高度和颜色设置在middle中

中间元素也需要写在第一个

<style>
    .left{
        width: 300px;
        height: 400px;
        background-color: darkcyan;
        float: left;
        margin-left: -100%;
    }
    .center{
        float: left;
        width: 100%;
    }
    .middle{
        height: 500px;
        margin-left: 300px;
        margin-right: 200px;
        background-color: gold;

    }
    .right{
        width: 200px;
        height: 200px;
        background-color: olivedrab;
        float: left;
        margin-left: -200px;
    }
</style>

<body>
    <div class="box">
        <div class="center">
            <div class="middle"></div>
        </div>
        <div class="left"></div>
        
        <div class="right"></div>
    </div>
</body>