三栏布局-七种实现

[amandakelake]

高度100px，左右各宽100px，中间部分可自适应宽度

浮动布局

<div class="float">
	<div class="left">left</div>
	<div class="right">right</div>
	<div class="main">浮动</div>
</div>

.float {
    .left {
        height: 100px;
        background-color: #e65;
        width: 100px;
        float: left;
    }
    .right {
        height: 100px;
        background-color: #ccc;
        width: 100px;
        float: right;
    }
    .main {
        // 不能给宽度
        height: 100px;
        background-color: bisque;
        margin: 0 100px;
    }
}

绝对定位

<div class="position">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="main">绝对定位</div>
</div>

.position {
    margin: 10px 0;
    position: relative;
    .left {
        height: 100px;
        background-color: #e65;
        width: 100px;
        position: absolute;
        left: 0;
    }
    .right {
        height: 100px;
        background-color: #ccc;
        width: 100px;
        position: absolute;
        right: 0;
    }
    .main {
        // padding或者margin都可以
        margin: 0 100px;
        height: 100px;
        background-color: bisque;
    }
}

BFC

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

.BFC {
    margin: 10px 0;
    .left {
        height: 100px;
        background-color: #e65;
        width: 100px;
        float: left;
    }
    .right {
        height: 100px;
        background-color: #ccc;
        width: 100px;
        float: right
    }
    .main {
        height: 100px;
        background-color: bisque; // 触发BFC
        overflow: hidden;
    }
}

flex

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

.flexBox {
    margin: 10px 0;
    display: flex;
    .left {
        height: 100px;
        background-color: #e65;
        width: 100px;
    }
    .main {
        flex: 1;
        height: 100px;
        background-color: bisque;
    }
    .right {
        height: 100px;
        background-color: #ccc;
        width: 100px;
    }
}

table

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

.tableCell {
    margin: 10px 0; // 要设置父元素宽度
    width: 100%;
    display: table; // 每一个子元素都要设置display:table-cell
    .left {
        height: 100px;
        background-color: #e65;
        width: 100px;
        display: table-cell;
    }
    .main {
        height: 100px;
        background-color: bisque;
        display: table-cell;
        width: auto
    }
    .right {
        height: 100px;
        background-color: #ccc;
        width: 100px;
        display: table-cell;
    }
}

网格grid

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

.grid {
    margin: 10px 0; // 只需要父元素设置即可
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 100px auto 100px;
    .left {
        height: 100px;
        background-color: #e65;
        width: 100px;
    }
    .main {
        height: 100px;
        background-color: bisque;
        width: auto
    }
    .right {
        height: 100px;
        background-color: #ccc;
        width: 100px;
    }
}

双飞翼

<div class="doubleFly">
  <div class="container">
    <div class="main">doubleFly</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

.doubleFly {
    margin: 10px 0; // 此处 ，缩进了100px的高度
    margin-bottom: 120px;
    .container {
        width: 100%; // 全都是浮动
        float: left;
        .main {
            // 空出两边间隔
            margin: 0 100px;
            height: 100px;
            background-color: bisque;
        }
    }
    .left {
        float: left; // 关键地方，这个100是整个父元素的宽度
        margin-left: -100%;
        height: 100px;
        background-color: #e65;
        width: 100px;
    }
    .right {
        float: right; // 关键地方
        margin-left: -100px;
        height: 100px;
        background-color: #ccc;
        width: 100px;
    }
}

圣杯

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

.hollyCup {
    // 父元素也需要两边空出100px
    margin: 10px 100px;
    .main {
        float: left;
        width: 100%;
        height: 100px;
        background-color: bisque;
    }
    .left {
        float: left;
        margin-left: -100%;
        position: relative;
        left: -100px;
        height: 100px;
        background-color: #e65;
        width: 100px;
    }
    .right {
        float: left;
        margin-left: -100px;
        position: relative;
        right: -100px;
        height: 100px;
        background-color: #ccc;
        width: 100px;
    }
}

提升思考

• 这五种方案各自的优缺点？
  浮动：脱离文档流，需要清除浮动；但兼容性比较好
  绝对定位：快；但是需要处理下面元素的位置
  Flex：目前比较完美的方案，特别是移动端
  表格布局：有历史上的问题（不深究），会同时增高
  网格布局：新技术，比较潮一点（这能展示学习能力）

• 如果高度也要考虑呢，或者去掉高度呢？
  目前只有flex、table布局是自适应的

• 这五种方案的兼容性，目前业务中的最优解？

[JuctTr]

你浮动布局中的父元素不需要清除浮动，是为什么呀？而且我觉得要把主要内容(main)放在最上面，有优先渲染的优点