CSS两/三栏布局、上下三栏布局和九宫格

perfect_code_hzy
761 阅读5分钟

前言

本文整理了css实现两栏布局的几种方式、三栏布局的几种方式、上下固定中间自适应布局的方式以及九宫格，如果对答案有不一样见解的同学欢迎评论区补充讨论，当然有问题，也欢迎在评论区指出。

学习就是这么简单，你听懂了吗？

image.png

一、两栏布局

初始html

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

1、利用浮动

原理：将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。

.outer {
  height: 100px;
}
.left {
  float: left;
  height: 100px;
  width: 200px;
  background: red;
}
.right {
  margin-left: 200px;
  width: auto;
  height: 100px;
  background: gold;
}

2、利用flex

原理：将左边元素的放大和缩小比例设置为0，基础大小设置为200px。将右边的元素的放大比例设置为1，缩小比例设置为1，基础大小设置为auto。

.outer {
  display: flex;
  height: 100px;
}
.left {
  flex-shrink: 0;  //缩小比例
  flex-grow: 0;    //放大比例
  flex-basis: 200px;  //基础大小
  background: red;
}
.right {
  flex: auto;
  /*11auto*/
  background: gold;
}

3、利用absolute绝对定位

同方案一：浮动

4、利用table布局

/* 清除浏览器默认边距 */
* {
    margin: 0;
    padding: 0;
}
/* 表格布局 */
.wrap {
    display: table;
    width: 100%;
}

.left {
    display: table-cell;
    width: 200px;
    height: 200px;
    background: red;
}

.right {
    display: table-cell;
    background: pink;
    height: 200px;
}

二、三栏布局

初始html

<div class="outer">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

1、利用浮动

//CSS reset
body,html {
    height:100%;
    padding: 0;
    margin: 0
}
//左栏左浮动
.left {
    background: red;
    width: 100px;
    float: left;
    height: 100%;
}
//中间自适应
.main {
    background: blue;
    height: 100%;
    margin:0px 200px 0px 100px;
}
//右栏右浮动
.right {
    background: red;
    width: 200px;
    float: right;
    height: 100%;
}

2、利用flex

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .left-center-right{
        display: flex;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    .left{
        flex-shrink: 0; //默认为1
        flex-grow: 0; //默认为0
        flex-basis: 400px;
        background: #05C020;
    }
    .center{
        flex: auto; //即1 1 auto
        background: #f4979a;
    }
    .right{
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: 200px;
        background: #88D6E9;
    }
</style>

3、利用absolute绝对定位

类似方案一：浮动

三、上下固定，中间自适应

初始html

<div class="top-center-bottom">
    <div class="top"></div>
    <div class="center">
            111111111<br>
            22222222222222<br> 
            3333333333333<br>
            444444444444444<br>
            55555555555<br>
            66666666666666<br>
            7777777777777777<br>
            888888888888888<br>
            99999999999999<br>
            111111111<br>
            22222222222222<br> 
            3333333333333<br>
            444444444444444<br>
            55555555555<br>
            66666666666666<br>
            7777777777777777<br>
            888888888888888<br>
            99999999999999<br>
            111111111<br>
            22222222222222<br> 
            3333333333333<br>
            444444444444444<br>
            55555555555<br>
            66666666666666<br>
            7777777777777777<br>
            888888888888888<br>
            99999999999999<br>
            111111111<br>
            22222222222222<br> 
            3333333333333<br>
            444444444444444<br>
            55555555555<br>
            66666666666666<br>
            7777777777777777<br>
            888888888888888<br>
            99999999999999<br>
            111111111<br>
            22222222222222<br> 
            3333333333333<br>
            444444444444444<br>
            55555555555<br>
            66666666666666<br>
            7777777777777777<br>
            888888888888888<br>
            99999999999999<br>
            111111111<br>
            22222222222222<br> 
            3333333333333<br>
            444444444444444<br>
            55555555555<br>
            66666666666666<br>
            7777777777777777<br>
            888888888888888<br>
            99999999999999<br>
    </div>
    <div class="bottom"></div>
</div>

1、利用fixed定位

.top-center-bottom .top{
    position: fixed;
    top:0;
    height:50px;
    width:100%;
    background:red;
}

.top-center-bottom .bottom{
    position: fixed;
    bottom:0;
    height:50px;
    width:100%;
    background:red;
}

.top-center-bottom .center{
    margin: 50px 0;
    width:100%;
    height:calc(100% - 100px);
    overflow:scroll;
    background-color:#F0E6A2;
}

2、利用absolute绝对定位

<style>
*{
    margin: 0;
    padding: 0;
}
.top-center-bottom .top{
    position:absolute;
    top:0;
    background-color:#05C020;
    height:50px;
    width:100%;
}
.top-center-bottom .bottom{
    position:absolute;
    bottom:0;
    background-color:#88D6E9;
    height:50px;
    width:100%;
}
.top-center-bottom .center{
    position:absolute;
    width:100%;
    top:50px;
    bottom:50px;
    height:calc(100% - 100px);
    overflow-y:scroll;
    background-color:#F0E6A2;
}
</style>

3、利用table布局

.top-center-bottom{
    display:table;
}
.top-center-bottom .top{
    display: table-row;
    height: 50px;
    background: red;
}
.top-center-bottom .bottom{
    display: table-row;
    height: 50px;
    background: red;
}
.top-center-bottom .center{
    display: block;
    height: calc(100vh - 100px);
    background: green;
    overflow-y: scroll;
}

四、九宫格

1、利用浮动

<div class="box">
    <ul class="box-inner">
        <li>九宫格1</li>
        <li>九宫格2</li>
        <li>九宫格3</li>
        <li>九宫格4</li>
        <li>九宫格5</li>
        <li>九宫格6</li>
        <li>九宫格7</li>
        <li>九宫格8</li>
        <li>九宫格9</li>
    </ul>
</div>

ul{
    padding: 0;
    margin: 0;
}
.box-inner>li{
    /*基础样式*/
    list-style: none;
    text-align: center;
    line-height: 200px;
    background: #f4979a;
    border-radius: 8px;

    float: left;
    width: 500px;
    height: 300px;
    margin: 0 10px 10px 0;
}
.box-inner{
    width: 1600px;
}

2、利用grid网格布局

原理：用CSS Grid 创建网格布局，是最简单也是最强大的方法。

<div class="wrapper">
    <div class="list">1</div>
    <div class="list">2</div>
    <div class="list">3</div>
    <div class="list">4</div>
    <div class="list">5</div>
    <div class="list">6</div>
    <div class="list">7</div>
    <div class="list">8</div>
    <div class="list">9</div>
</div>

/*九个单元的父元素wrapper设置display为grid类型（注意兼容写法）*/
/*设置每一行中单个元素的宽度： grid-template-columns，设置每个元素宽度值100px，也可以百分比形式。*/
/*设置每一列中单个元素的高度： grid-template-rows，每个高度值100px根据需要设置。*/
<style>
.wrapper{
    width: 100%;
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 200px 200px 200px;
}
.list{
    background: #f4979a;
    margin: 5px;
    /*border-radius: 18px;*/
}
</style>

image.png

总结

觉得写得好的，对你有帮助的，可以分享给身边人，知识越分享越多，千万不要吝啬呀

后续更新css其它内容，请关注我，整理好，分享给你们，我们一起学前端

avatar
文章
阅读
粉丝