正在进入ing...

前端多列布局备忘

发布时间:2020-11-22 浏览量: 1479 文章分类: 前端相关

自适应布局解决方案

一列定宽、一列自适应（定宽+自适应）

  • 使用float + margin 方法解决 假设左边我们定宽100px，右边不定宽，那么实现可以如下
        .left{
            float: left;
            width: 100px;
        }
        .right {
            margin-left: 100px;
        }

    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
  • 使用float + overflow 方法解决 同样的问题，在换一个解决方法试试
        .left{
            float: left;
            width: 100px;
        }
        .right {
            overflow: hidden;
        }
    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
  • 使用table方法解决
        .parent{
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        .left,.right{
            display: table-cell;
        }
        .left{
            width: 100px;
        }

    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
  • 使用flex方法解决
        .parent{
            display: flex;
        }
        .left{
            width: 100px;
        }
        .right{
            flex: 1;
        }

两页定宽+自适应

        .left,.center{
            float: left;
            width: 100px;
        }
        .right{
            overflow: hidden;
        }

    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="center">
            <p>center</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>

其余的方法等同上面的类似

不定宽 + 自适应解决方案

  • 使用float + overflow方法解决
        .left{
            float: left;
        }
        .right{
            overflow: hidden;
        }

    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
  • 使用table方法解决
        .parent{
            display: table;
            width: 100%;
        }
        .left,.right{
            display: table-cell;
        }

    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
  • 使用flex方法实现
        .parent{
            display: flex;
        }
        .left{
            width: 100%;
        }
        .right{
            flex: 1;
        }

    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>

多列不定宽+ 自适应解决方法上面的方法也同样适用

等宽布局解决方案

多列等宽布局

  • 使用float方法解决 这个没什么好说的，比如我们一行有4个，直接float-left:25%即可。但是问题如果我们想增加间距等问题就会比较麻烦。

首先我知道整列的宽度是100% = C，每列的宽度=W，每列之间的间隔=G，因为4列之间只有3个间隔，所以公式可以如下 C = W * N + G * (N - 1)也可以在换算一下，也就是C = (W +G) *N -G,在换算也就是C + G = (W + G) * N，也就是给外面的父容器+上间隔的像素。

        .parent{
            margin-left: -20px;
        }
        .column{
            float: left;
            width: 25%;
            padding-left: 20px;
            box-sizing: border-box;
        }

    <div class="parent">
        <div class="column">1</div>
        <div class="column">2</div>
        <div class="column">3</div>
        <div class="column">4</div>
    </div>
  • 使用table实现
        .parent-fix{
            margin-left: -20px;
        }
        .parent{
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        .column{
            display: table-cell;
        }

    <div class="parent-fix">
        <div class="parent">
            <div class="column">1</div>
            <div class="column">2</div>
            <div class="column">3</div>
            <div class="column">4</div>
        </div>
    </div>
  • 使用flex实现
        .parent{
            display: flex;
        }
        .column{
            flex: 1;
        }

    <div class="parent">
        <div class="column">1</div>
        <div class="column">2</div>
        <div class="column">3</div>
        <div class="column">4</div>
    </div>

等高布局解决方案

多列的时候左右两列一样高

等高布局的意思就是其中有一列的内容被撑开的时候，另外一列一样要被撑开

  • 使用table解决
        .parent{
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        .left,.right{
            display: table-cell;
        }
        .left{
            width: 100px;
            border-right: 20px solid transparent;
            background-clip: padding-box;
        }

    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
  • 使用flex解决
        .parent{
            display: flex;
        }
        .left{
            width: 100px;
            margin-right: 20px;
        }
        .right{
            flex: 1;
        }

    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>
  • 使用float解决(伪等高)
        .left{
            float: left;
            width: 100px;
        }
        .right{
            overflow: hidden;
        }
        .left,.right{
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .parent{
            overflow: hidden;
        }

    <div class="parent">
        <div class="left">
            <p>left</p>
        </div>
        <div class="right">
            <p>right</p>
            <p>right</p>
        </div>
    </div>

一句话总结就是flex天下无敌，简单方便。