前端经典三栏布局

浮动实现

前面放置的两个div进行浮动，后面一个让其margin auto 居中

 <style>
        /* 浮动三栏 */
        .father div {
            width: 200px;
            height: 200px;
        }

        .left {
            background-color: red;
            float: left;
        }

        .father .mid {
            height: 200px;
            width: 100%;
            background-color: green;
            margin: auto;
        }

        .right {
            background-color: blue;
            float: right;
        }

        .mid+div {
            height: 100px;
            width: 100%;
            background-color: black;
        }
    </style>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
        <div class="mid"></div>
        <div></div>
    </div>

position定位实现

  <style>
        .left {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
        }

        .right {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            right: 0;
        }

        .mid {
            height: 100px;
            width: 100%;
            background-color: green;
            margin: 0px auto;
        }
    </style>
    <div class="father">
        <div class="left">1</div>
        <div class="right">2</div>
        <div class="mid">3</div>
    </div>

flex实现

 <style>
        .father {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .left {
            width: 100px;
            height: 100px;
            background: red;

        }

        .right {
            width: 100px;
            height: 100px;
            background-color: blue;

        }

        .mid {
            height: 100px;
            width: 100px;
            background-color: green;
            /*相当于 flex-grow: 1; */
            flex: 1;

        }
    </style>
    <div class="father">
        <div class="left">1</div>
        <div class="mid">3</div>
        <div class="right">2</div>
    </div>