「面试高频」能用 CSS 实现一个两栏布局吗？（定宽，与不定宽的实现）

本文链接：https://blog.csdn.net/m0_52409770/article/details/123970920

文章目录

一、左栏固定宽度，右栏自适应
二、左栏不定宽，右栏自适应
- 1、浮动 + BFC
- 2、flex

一、左栏固定宽度，右栏自适应

1、浮动 + margin

通过元素浮动，然后给定固定宽度，左元素margin该固定宽度，实现两栏布局

<body>
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

<style>
    .left,.right{
        height: 300px;
    }

    .left {
        float: left;
        width: 300px;
        background-color: aqua;
    }

    .right {
        margin-left: 300px;
        background-color: aquamarine;
    }
</style>

2、浮动 + BFC

通过左栏开启浮动，右栏开启BFC，开启了BFC的元素会环绕开启了浮动的元素

<body>
  <div class="container" style="height: 1000px;">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

<style>
    .left,.right{
        height: 300px;
    }

    .left {
        float: left;
        width: 300px;
        background-color: aqua;
    }

    .right {
       	/*触发BFC环绕float*/
        overflow: hidden;
        background-color: aquamarine;
    }
</style>

3、定位

利用左侧定位，右侧margin实现

(此方法中间会有间隙，若需要消除间隙则给所有的标签，都重置margin为0)

<body>
  <div class="container" style="height: 1000px;">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

<style>
    .contaier{
        position: relative;
    }
    .left{
        position: absolute;
        width: 300px;
        height: 300px;
        left: 0;
        background-color: aqua;
    }
    .right {
        margin-left: 300px;
        height: 300px;
        background-color: aquamarine;
    }
</style>

或者right 使用定位，设置right 为0，left 为300px 也可也实现

<style>
    .right {
        height: 300px;
        position: absolute;
        right: 0;
        left: 300px;
        background-color: aquamarine;
    }
</style>

4、flex布局

<body>
  <div class="container" >
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

<style>
    .container{
        display: flex;
    }
    .left{
        width: 300px;
        height: 300px;
        background-color: aqua;
    }
    .right {
        /* 或者 flex:1; */
        flex-grow: 1;
        height: 300px;
        background-color: aquamarine;
    }
</style>

5、浮动 + 负外边距（双飞翼两栏版）

双飞翼布局其实和圣杯布局的精髓是一样的，都是通过设置负margin来实现元素的排布，不同的就是html结构，双飞翼是在center元素内部又设置了一层inner-center的元素并设置它的左右margin，而非圣杯布局的padding，来排除两边元素的覆盖。所以这两种布局原理基本一样，关键就是在于设置负margin的技巧，和元素浮动的相对定位技巧来实现。

先让左侧，右侧都浮动，随后右栏设置100%宽宽度，因为容器容不下而到下一层，随后给左侧设置margin-right为 -100 ，让右侧div上升覆盖整个div，然后让inner设置左边距300px，实现布局

<style>
    .left{
        width: 300px;
        height: 300px;
        background-color: aqua;
        float: left;
        margin-right: -100%;
    }
    .right {
        height: 300px;
        width: 100%;
        float: left;
    }
    .inner{
        margin-left: 300px;
        height: 300px;
        background-color: red;
    }
</style>

<body>
    <div class="container" >
        <div class="left"></div>
        <div class="right">
            <div class="inner"></div>
        </div>
    </div>
</body>

6、table布局

<style>
    .container{
        /*注意要设置为100%*/
        width: 100%;
        display: table;
    }
    .left{
        width: 300px;
        height: 300px;
        background-color: aqua;
        display: table-cell;
    }
    .right {
        height: 300px;
        background-color: aquamarine;
        display: table-cell;
    }
</style>
</head>

<body>
    <div class="container" >
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

二、左栏不定宽，右栏自适应

这样的布局只需要在原有的定宽基础上去掉宽度即可

左侧的宽度就会随着里面内容的大小而缩放。

1、浮动 + BFC

<style>
    .left{
        float: left;
        height: 300px;
        line-height: 300px;
        background-color: aqua;
    }
    .right {
        overflow: hidden;
        height: 300px;
        background-color: aquamarine;
    }
</style>

<body>
    <div class="container" >
        <div class="left">我是不定宽的元素</div>
        <div class="right"></div>
    </div>
</body>

2、flex

<style>
    .container{
        display: flex;
    }
    .left{
        height: 300px;
        line-height: 300px;
        background-color: aqua;
    }
    .right {
        flex: 1;
        height: 300px;
        background-color: aquamarine;
    }
</style>

<body>
    <div class="container" >
        <div class="left">我是不定宽的元素</div>
        <div class="right"></div>
    </div>
</body>