CSS（七）两栏布局详解

你的名字 2023-06-27 08:53 15阅读 0赞

这是一个系列的文章，你也可以查看其他文章：

0、[CSS-预热篇][CSS-]

1、[CSS（一）详解position][CSS_position]

2、[CSS（二）transform][CSS_transform]

3、[CSS（三）flex布局（flex弹性布局详解）][CSS_flex_flex]

4、[CSS（四）详解Grid布局][CSS_Grid]

5、[CSS（五）CSS动画-transition简介][CSS_CSS_-transition]

6、[CSS（六）CSS动画-animation简介][CSS_CSS_-animation]

7、[CSS（七）两栏布局详解][CSS]

两栏布局是非常经典的布局知识。本文试着用最简单的代码总结左侧固定，右侧自适应的两栏布局方式。

**假定实现效果为：左侧200px，右侧自适应，左右两侧相距20px。**

基本的html公共代码

<div class="wrapper">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

基本样式：

.wrapper{
        margin:20px;
    }
    .left{
        width: 200px;
        background: hotpink;
    }
    .right{
        background: khaki;
    }

以下方法只需分别增加下面的代码即可实现

1、float+margin-left

.left{
        float: left;
    }
    .right{
        margin-left: 220px;
    }

2、position+margin-left

.left{
        position: absolute;
    }
    .right{
        margin-left: 220px;
    }

3、双inlineblock+calc

.right, .left{
        display: inline-block;
        vertical-align: top;    
    }
    .right{
        width: calc(100% - 220px);
    }

4、双float+calc

.left, .right{
        float: left;
    }   
    .right{
        margin-left: 20px;
        width: calc(100% - 220px);
    }

5、float+BFC

这个方案同样是利用了左侧浮动，但是右侧盒子通过`overflow: auto;`形成了BFC，因此右侧盒子不会与浮动的元素重叠。

.wrapper{
        overflow: auto;
    }
    .left{
        float: left;
        margin-right: 20px;
    }
    .right{
        margin-left: 0;
        overflow: auto;
    }

6、flex

.wrapper{
        display: flex;
        /* align-items: flex-start;不设置这个属性默认是两列等高的:align-items: stretch; */
    }
    .left{
        flex: 0 0 auto;
        margin-right: 20px;
    }
    .right{
        flex: 1 1 auto;
    }

7、grid

.wrapper{
        display: grid;
        grid-template-columns: 200px 1fr;
        align-items: flex-start;
    }
    .left{
        grid-column: 1;
    }
    .right{
        grid-column: 2;
        margin-left: 20px;
    }

完整代码详见：[https://github.com/karma2014/css-skills/tree/master/two\_column][https_github.com_karma2014_css-skills_tree_master_two_column]

[CSS-]: https://blog.csdn.net/u014744118/article/details/98873684
[CSS_position]: https://blog.csdn.net/u014744118/article/details/97300870
[CSS_transform]: https://blog.csdn.net/u014744118/article/details/98037338
[CSS_flex_flex]: https://blog.csdn.net/u014744118/article/details/99199806
[CSS_Grid]: https://blog.csdn.net/u014744118/article/details/99658494
[CSS_CSS_-transition]: https://blog.csdn.net/u014744118/article/details/102616568
[CSS_CSS_-animation]: https://blog.csdn.net/u014744118/article/details/102617125
[CSS]: https://blog.csdn.net/u014744118/article/details/103848497
[https_github.com_karma2014_css-skills_tree_master_two_column]: https://github.com/karma2014/css-skills/tree/master/two_column