如何实现两列布局和三列布局？面试问到了了

一休、り

已于 2022-05-25 15:05:52 修改

阅读量882

点赞数 1

分类专栏： css 文章标签：面试 css3 前端

于 2022-05-25 15:03:17 首次发布

本文链接：https://blog.csdn.net/m0_46322755/article/details/124962489

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天面试问到了两列布局：
问：如何实现两列布局，你有几种方法？
来记录下吧！

1. 两列布局

什么是两列布局？

两列布局就是一列定宽，一列自适应的布局

HTML如下：

<body>
    <div class="containor">
        <div class="left">
            我是左大侠
            <p>英俊又潇洒</p>
        </div>
        <div class="right">
            我是右公主
            <p>美丽又可爱</p>
        </div>
    </div>
</body>

不做操作，样式如下：
在这里插入图片描述

固定左边，右边自适应实现方式

1. 子绝父相，右盒子定位left>=左宽，且right要为0，否则达不到自适应效果

 <style>
        .containor{
          position: relative;
          width: 100%;
          height: 300px;

        }
        .left{
            background-color: yellowgreen;
            width: 200px;
            position: absolute;
        }
        .right{
            background-color: pink;
            position: absolute;
            left: 210px;
            right: 0;
        }
    </style>

效果如下：
在这里插入图片描述

2. float + margin-right

让左盒子浮动，脱离文档流，右盒子给一个左外边距

<style>
 .left{
            background-color: yellowgreen;
            width: 200px;
            float:left;
        }
        .right{
            background-color: pink;
            margin-left: 210px;
        }
</style>

在这里插入图片描述

3. absolute + margin-left

这种方式跟上一种类似，通过让做盒子脱离文档流，右盒子给一个左外边距

 .left{
            background-color: yellowgreen;
            width: 200px;
            position:absolute;
        }
        .right{
            background-color: pink;
            margin-left: 210px;
        }

在这里插入图片描述

4. Flex弹性布局

设置父盒子的display:flex，右盒子的flex：1，占据100%

 .containor{
         display: flex;
          width: 100%;
          height: 300px;

        } 
        .left{
            background-color: yellowgreen;
            width: 200px;
        }
        .right{
            background-color: pink;
            flex:1;
            margin-left: 10px;
        }

在这里插入图片描述

5. float + BFC(overflow)

让做盒子浮动，BFC区域不会与浮动盒子重叠，右盒子使用overflow：hidden来触发BFC

<style>
         .containor{
          width: 100%;
          height: 300px;

        } 
        .left{
            background-color: yellowgreen;
            width: 200px;
            float: left;
            margin-right: 10px;
        }
        .right{
            background-color: pink;
           overflow: hidden;
        }
    </style>

在这里插入图片描述

6. grid布局

通过grid生成块级网格布局，然后使用template属性的columns指定网格的列宽

 <style>
         .containor{
          width: 100%;
          height: 300px;
          display: grid;/*grid生成块级网格 */
          grid-template-columns: auto 1fr;/*指定网格的列宽*/

        } 
        .left{
            background-color: yellowgreen;
             width: 200px;
            margin-right: 10px;
        }
        .right{
            background-color: pink;
        }
    </style>

在这里插入图片描述

2. 三列布局

左右两列定宽，中间自适应，三列布局有双飞翼布局和圣杯布局

1、结构上：中间自适应的区域要在left和right上
2、父盒子必须是IE怪异模型，即box-sizing: border-box，这样不会因为设padding而把盒子挤出去。
3、margin的负值是使float元素移动到上面。左盒子的margin-left= -100%是父元素的宽度，把左盒子放到主盒子的左边，右盒子的margin-left= -200px,把右盒子移动到主盒子（main）的右边。

1. 双飞翼布局

HTML:

<body>
    <div class="containor">
        <div class="main">
            <div class="main_box">
                <h1>我是大BOSS</h1>
            </div>
        </div>

        <div class="left">
            我是左大侠
            <p>英俊又潇洒</p>
        </div>

        <div class="right">
            我是右公主
            <p>美丽又可爱</p>
        </div>
    </div>
</body>

<style>
        *{
            padding:0px;
            margin: 0;

        }
         .containor{
            box-sizing: border-box;/*IE怪异模型*/
            width: 100%;
         
        } 
        .main{
            width: 100%;
            float: left;
        }
        .main_box{
            background-color: yellow;
            margin: 0 200px; 
            height: 200px;

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

在这里插入图片描述

2. 圣杯布局

使用position，将左和右盒子分别定位到最左边和最右边，因为浮动会遮住中间（主盒子）的显示。
HTML：

<body>
    <div class="containor">
        <div class="main">
                <h1>我是大BOSS,要在中间自适应</h1>
        </div>

        <div class="left">
            我是左大侠
            <p>英俊又潇洒</p>
        </div>

        <div class="right">
            我是右公主
            <p>美丽又可爱</p>
        </div>
    </div>
</body>

css:

<style>
        *{
            padding:0px;
            margin: 0;

        }
         .containor{
            box-sizing: border-box;/*IE怪异模型*/
            width: 100%;
            padding-left: 200px;
            padding-right: 200px;
         
        } 
    
        .main{
            width: 100%;
            float: left;
            background-color: yellow;
            height: 200px;

        }
        .left{
            background-color: yellowgreen;
             width: 200px;
            margin-left: -100%;
            float: left;
            height: 100px;
            position: relative;
            left: -200px;
            
        }
        .right{
            background-color: pink;
            width: 200px;
            float: left;
            margin-left: -200px;
            height: 300px;
            position: relative;
            right: -200px;
        }
    </style>