CSS-两栏布局六种实现方式

·  阅读 426

最近面试经常被问,那就赶紧做了一个总结在这里

两栏布局(左侧固定宽度为200px,右侧自适应)

<body>
    <div class='wrap'>
            <div class='left'>左侧固定内容</div>
            <div class='right'>右侧自适应</div>
    </div>
</body>
复制代码

1.使用浮动-float

 /*清除浏览器默认设置的边距*/
 * {
    padding: 0;
    margin: 0;
   }
    .wrap {
        overflow: hidden;
        border: 1px solid red;
    }
    /*脱离文档流*/
   .left {
        float: left;      //左边元素向左浮动
        width: 200px;
        height: 200px;
        background: pink;
    }
    .right {
        height: 200px;
        background: skyblue;
    }
复制代码

注:使用float会使元素脱离文档流,这样会导致两个div发生重叠,而在.wrap中设置overflow: hidden是为了触发BFC,清除浮动(不会重叠)。

2.使用绝对定位-absolute

/*清除浏览器默认设置的边距*/
* {
    padding: 0;
    margin: 0;
}
.wrap {
    overflow: hidden;
    position: relative;
    border: 1px solid red;
}
/*脱离文档流*/
.left {
    position: absolute;   // 绝对定位
    left: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: pink;
}
.right {
    margin-left: 200px;    // 设置左边距和左边元素等宽
    height: 200px;
    background: skyblue;
}
复制代码

注:这个实现方案要注意的是.right中设置margin-left: 200px,这里的200px是左边元素的宽。

3.使用弹性布局-flex

/*清除浏览器默认设置的边距*/
* {
    padding: 0;
    margin: 0;
}
.wrap {
    display: flex;      // 弹性布局 
    border: 1px solid red;
}
.left {
    flex: 0 0 200px;   // 左边元素不扩大不缩小,默认宽度为200px
    height: 200px;
    background: purple;
}
.right {
    flex: 1;          // 右边元素扩大,自动填充过多空间
    height: 200px;
    background: skyblue;
}
复制代码

注:flex属性要在子元素上设置。flex属性是flex-grow(增长比例)和flex-shrink(缩小比例)和flex-basis(默认大小)的缩写。

4.使用表格布局-table

/*清除浏览器默认设置的边距*/
* {
    padding: 0;
    margin: 0;
}
.wrap {
    display: table;      // 表格布局
    border: 1px solid red;
    width: 100%;
}
.left {
    display:table-cell;  //设置这个元素为表单中的单元格
    height: 200px;
    width: 200px;
    background: purple;
}
.right {
    display:table-cell;  //设置这个元素为表单中的单元格
    height: 200px;
    background: skyblue;
}
复制代码

注:表格布局按照我的理解是将父元素设置成一个表格,里面的元素都是一个一个单元格,可以设置几行几列,所以这个方法也可以实现三栏布局(一行三列);可以设置行高列高。

5.使用网格布局-grid

/*清除浏览器默认设置的边距*/
* {
    padding: 0;
    margin: 0;
}
.wrap {
    display:grid;   // 网格布局
    grid-template-rows: 200px;  // 设置行高
    grid-template-columns: 200px auto;   // 设置列宽
    border: 1px solid red;
}
.left {
    background: purple;
}
.right {
    background: skyblue;
}
复制代码

注:grid布局真的太方便啦!!但是放在这里好像有点大材小用了

6.使用calc()函数

/*清除浏览器默认设置的边距*/
* {
    padding: 0;
    margin: 0;
}
.wrap {
    overflow: hidden;
    border: 1px solid red;
}
.left {
    float: left;
    background: purple;
    height: 200px;
    width: 200px;
}
.right {
    background: skyblue;
    height: 200px;
    width: calc( 100% -200px )
}
复制代码

注:cala()函数能动态计算出宽度

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改