三栏布局只知道圣杯、双飞翼，最终评级是……F

头像
leefat
    阅读 7 分钟
    3

    三栏布局，面试与工作中的常见布局。分左中右三部分，其中左右宽度已知，中间宽度自适应。
    根据不同的DOM顺序与CSS处理，这里写下了五类布局方式。

    一、浮动布局

    1 圣杯布局

    L：“我问你，你就是我的Master吗？”
    ……

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .content {
        padding:0px 200px;
        overflow: hidden;
      }
      .left, .center, .right {
        position:relative;
        min-height:160px;
      }
      .left{
        width:200px;
        margin-left:-100%;
        float:left;
        left:-200px;
        background-color:deepskyblue;
      }
      .center {
        width:100%;
        float:left;
        background-color:gray;
      }
      .right {
        width:200px;
        margin-left:-100%;
        float:right;
        right:-200px;
        background-color:pink;
      }
    </style>
  </head>
  <body>
    <section class="content">
      <div class="center">
        <h1>圣杯布局</h1>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </section>
  </body>
</html>

    2 双飞翼布局

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .content {
        overflow: hidden;
      }
      .left, .center, .right {
        min-height:160px;
      }
      .left{
        width:200px;
        margin-left:-100%;
        float:left;
        background-color:deepskyblue;
      }
      .center {
        width:100%;
        float:left;
        background-color:gray;
      }
      .right {
        width:200px;
        margin-left:-100%;
        float:right;
        background-color:pink;
      }
      .center-inner {
        margin:0px 200px
      }
    </style>
  </head>
  <body>
    <section class="content">
      <div class="center">
        <div class="center-inner">
          <h1>双飞翼布局</h1>
        </div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </section>
  </body>
</html>

    3 浮动布局

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Float布局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .left,
      .center,
      .right {
        min-height: 160px;
      }
      .left {
        width: 200px;
        float: left;
        background-color: deepskyblue;
      }
      .center {
        background-color: gray;
      }
      .right {
        width: 200px;
        float: right;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <section class="content">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h1>中间部分的内容</h1>
      </div>
    </section>
  </body>
</html>

    这样会有个问题，就是center高度大于两侧的时候，会duang的蔓延到两侧，像这样：
    图片描述

    相应的，为了让页面成为我们需要的样子，引入了两个解决方案。

    BFC修正
    图片描述

    L：“我问你，你这里是不是有什么问题？(指着脑袋)”
    ……
    BFC(Block Fromatting Context),直译就是块级格式化上下文。
    先知其然吧，概念差不多又需要整理一篇文章。用了它，内外部元素渲染互不影响，center就不会蔓延到两侧了。
    具体代码：

    .center{
  overflow:hidden;
  background-color: gray;
}

    Margin修正

    .center{
  margin: 0 200px;
  background-color: gray;
}

    二、Flex布局

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Flex布局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .content {
        width:100%;
        display:flex;
        min-height:160px;
      }
      .left{
        flex-basis: 200px;
        background-color:deepskyblue;
      }
      .center {
        flex-grow:1;
        background-color:gray;
      }
      .right {
        flex-basis: 200px;
        background-color:pink;
      }
    </style>
  </head>
  <body>
    <section class="content">
      <div class="left"></div>
      <div class="center">
        <h1>Flex布局</h1>
      </div>
      <div class="right"></div>
    </section>
  </body>
</html>

    三、绝对定位布局

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>绝对定位布局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .content {
        position:relative;
        overflow: hidden;
      }
      .left, .center, .right {
        min-height:160px;
      }
      .left{
        position:absolute;
        width:200px;
        top:0px;
        left:0px;
        background-color:deepskyblue;
      }
      .center {
        margin:0px 200px;
        background-color:gray;
      }
      .right {
        position:absolute;
        width:200px;
        top:0px;
        right:0px;
        background-color:pink;
      }
    </style>
  </head>
  <body>
    <section class="content">
      <div class="left"></div>
      <div class="center">
        <h1>绝对定位布局</h1>
      </div>
      <div class="right"></div>
    </section>
  </body>
</html>

    四、Table布局

    现在很少人用的table标签

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Table布局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .content {
        width:100%;
      }
      .left{
        width:200px;
        background-color:deepskyblue;
      }
      .center {
        background-color:gray;
      }
      .right {
        width:200px;
        background-color:pink;
      }
    </style>
  </head>
  <body>
    <table class="content" border="0" cellspacing="0" cellpadding="0" height="160px">
      <tr>
        <td class="left"></td>
        <td class="center">Table布局</td>
        <td class="right"></td>
      </tr>
    </table>
  </body>
</html>

    display:table-cell与上面一个意思

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>table-cell</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .content {
        display:table;
        width:100%;
        height:160px;
      }
      .left, .center, .right {
        display:table-cell;
      }
      .left{
        width:200px;
        background-color:deepskyblue;
      }
      .center {
        background-color:gray;
      }
      .right {
        width:200px;
        background-color:pink;
      }
    </style>
  </head>
  <body>
    <section class="content">
      <div class="left"></div>
      <div class="center">
        <h1>table-cell</h1>
      </div>
      <div class="right"></div>
    </section>
  </body>
</html>

    五、网格布局

    如果说flex用于一维，grid就是用于二维的。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网格布局</title>
    <style>
      html * {
        margin: 0;
        padding: 0;
      }
      .content {
        display: grid;
        width: 100%;
        grid-template-rows: 160px;
        grid-template-columns: 200px 1fr 200px;
      }
      .left{
        background-color:deepskyblue;
      }
      .center {
        background-color:gray;
      }
      .right {
        background-color:pink;
      }
    </style>
  </head>
  <body>
    <section class="content">
      <div class="left"></div>
      <div class="center">
        <h1>网格布局</h1>
      </div>
      <div class="right"></div>
    </section>
  </body>
</html>

    好了，后续再来说一下各自的优缺点。

    你一赞，我一赞，开开心心去吃饭~??

    htmlcss
    leefat
    40 声望1 粉丝
    下一篇 »
    JavaScript继承的几种方式

    引用和评论

    推荐阅读
    头像
    POSTMAN离线安装

    leefat阅读 11.5k评论 1

    头像
    集团公司邮箱格式怎么写？

    ZohoMail阅读 36.1k

    头像
    Html&Css测试试题（简单版）

    云绮棠兮赞 2阅读 4.6k

    头像
    问题记录

    吴季分赞 2阅读 499

    头像
    国外邮箱全攻略：注册、登录、购买及格式详解

    ZohoMail阅读 3.3k

    头像
    你好，我是冴羽，我写了一套《前端大佬成长之路》

    冴羽赞 1阅读 811

    头像
    CSS 小技巧 —— CSS 实现 ... 的 loading 加载中动画

    月恒赞 1阅读 980

    0 条评论
    得票最新