CSS 经典布局（两栏布局 + 三栏布局 + 圣杯布局 + 双飞翼布局）

最新推荐文章于 2024-08-09 16:30:00 发布

淘淘是只狗

最新推荐文章于 2024-08-09 16:30:00 发布

阅读量589

点赞数 1

分类专栏： CSS 文章标签： vue.js react.js javascript

本文链接：https://blog.csdn.net/qq_43477721/article/details/121390362

版权

CSS 专栏收录该内容

26 篇文章 6 订阅

订阅专栏

在这里插入图片描述

两栏布局（左列定宽, 右列自适应）

DOM结构

<div class="box">
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>

`float + margin`

.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  background-color: antiquewhite;
  float: left;
}

.box-right {
  margin-left: 200px;
  background-color: aquamarine;
}

利用 `calc` 计算宽度

.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  background-color: antiquewhite;
  float: left;
}

.box-right {
  background-color: aquamarine;
  width: calc(100% - 200px);
  float: right;
}

`float + overflow`

.box {
 height: 200px;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  float: left;
  background-color: blue;
}

.box-right {
  overflow: hidden;
  background-color: red;
}

`flex`

.box {
  height: 200px;
  display: flex;
}

.box > div {
  height: 100%;
}

.box-left {
  width: 200px;
  background-color: blue;
}

.box-right {
  flex-grow: 1;
  overflow: hidden;
  background-color: red;
}

三栏布局

左右加浮动，中间不动

<style>
  .layout.float .left {
    float: left;
    width: 300px;
    background: red;
  }
  .layout.float .right {
    float: right;
    width: 300px;
    background: blue;
  }
  .layout.float .center {
    background: yellow;
  }
</style>
<section class="layout float">
  <article class="left-center-right">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
      <h1>浮动解决方案</h1>
      <p>1.这是布局的中间部分</p>
      <p>2.这是布局的中间部分</p>
    </div>
  </article>
</section>

绝对定位，div 全部浮动，左边距离设为0，中间设 300，最右边那个右边设0

<style>
  .layout.absolute .left-center-right>div {
    position: absolute;
  }
  .layout.absolute .left {
    left: 0;
    width: 300px;
    background: red;
  }
  .layout.absolute .center {
    left: 300px;
    right: 300px;
    background: yellow;
  }
  .layout.absolute .right {
    right: 0;
    width: 300px;
    background: blue;
  }
</style>
<section class="layout absolute">
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>绝对定位的解决方案</h1>
      <p>1.这是布局的中间部分</p>
      <p>2.这是布局的中间部分</p>
    </div>
    <div class="right"></div>
  </article>
</section>

flexbox布局父元素设置 flex，左右元素设置宽高，中间设置 flex: 1

<style>
  .layout.flexbox .left-center-right {
    display: flex;
  }
  .layout.flexbox .left {
    width: 300px;
    background: red;
  }
  .layout.flexbox .center {
    flex: 1;
    background: yellow;
  }
  .layout.flexbox .right {
    width: 300px;
    background: blue;
  }
</style>
<section class="layout flexbox">
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>flexbox的解决方案</h1>
      <p>1.这是布局的中间部分</p>
      <p>2.这是布局的中间部分</p>
    </div>
    <div class="right"></div>
  </article>
</section>

父元素设置表格属性，div 设置 table-cell，子元素左右设置宽高即可

<style>
  .layout.table .left-center-right {
    width: 100%;
    display: table;
    height: 100px;
  }
  .layout.table .left-center-right>div {
    display: table-cell;
  }
  .layout.table .left {
    width: 300px;
    background: red;
  }
  .layout.table .center {
    background: yellow;
  }
  .layout.table .right {
    width: 300px;
    background: blue;
  }
</style>
<section class="layout table">
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>表格布局的解决方案</h1>
      <p>1.这是布局的中间部分</p>
      <p>2.这是布局的中间部分</p>
    </div>
    <div class="right"></div>
  </article>
</section>

网格布局，父元素设置 grid

<style>
  .layout.grid .left-center-right {
    display: grid;
    width: 100%;
    grid-template-rows: 100px;
    grid-template-columns: 300px auto 300px;
  }
  .layout.grid .left {
    background: red;
  }
  .layout.grid .center {
    background: yellow;
  }
  .layout.grid .right {
    background: blue;
  }
</style>
<section class="layout grid">
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h1>网格布局的解决方案</h1>
      <p>1.这是布局的中间部分</p>
      <p>2.这是布局的中间部分</p>
    </div>
    <div class="right"></div>
  </article>
</section>

26. 圣杯布局和双飞翼布局

通俗的来说就是左右两栏固定宽度，中间部分自适应的三栏布局。

26.1 圣杯布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      right: 0;
    }

    .header,
    .footer {
      height: 100px;
      background-color: aquamarine;
    }

    .container {
      /* 
        7. container设置padding: 0, rightWidth, 0, leftWidth
       */
      padding: 0 220px 0 200px;
      /* 
        2. 给container设置上overflow: hidden，可以形成BFC撑开文档
      */
      overflow: hidden;
    }

    .left,
    .middle,
    .right {
      /* 
        5. 给left、middle、right设置position: relative，不会遮挡middle的内容
       */
      position: relative;
      /* 
        1. 首先把left、middle、right都放出来，给它们三个设置上float: left, 脱离文档流
        */
      float: left;
      min-height: 130px;
      word-break: break-all;
      /* 
        8. 解决单独部分内容扩充的时候，底部会参差不齐。
       */
      padding-bottom: 9999px;
      margin-bottom: -9999px;
    }

    .left {
      margin-left: -100%;
      /* 
        6. left设置 left: -leftWidth
       */
      left: -200px;
      /* 
        3. left、right设置上各自的宽度
       */
      width: 200px;
    }

    .right {
      margin-left: -220px;
      /* 
        6. right设置 right: -rightWidth
       */
      right: -220px;
      /* 
        3. left、right设置上各自的宽度
       */
      width: 220px;
    }

    .middle {
      /* 
        4. middle设置width: 100%
       */
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="header">header</div>
  <div class="container">
    <div class="middle">
      <h4>middle</h4>
      <p>
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddle
      </p>
    </div>
    <div class="left">
      <h4>left</h4>
      <p>
        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
      </p>
    </div>
    <div class="right">
      <h4>right</h4>
      <p>
        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightright
      </p>
    </div>
  </div>
  <div class="footer">footer</div>
</body>

</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .header,
    .footer {
      height: 100px;
      background-color: aquamarine;
    }

    .container {
      /* 
        2. 给container设置上overflow: hidden; 可以形成BFC撑开文档
       */
      overflow: hidden;
    }

    .left,
    .middle,
    .right {
      /* 
        1. 首先把left、middle、right都放出来, middle中增加inner，给它们三个设置上float: left, 脱离文档流
       */
      float: left;
      min-height: 130px;
      word-break: break-all;
      /* 
        7. 解决单独部分内容扩充的时候，底部会参差不齐。
       */
      padding-bottom: 9999px;
      margin-bottom: -9999px;
    }

    .left {
      /* 
        5. left设置 margin-left: -100%
       */
      margin-left: -100%;
      /* 
        3. left、right设置上各自的宽度
       */
      width: 200px;
    }

    .right {
      /* 
        6. right设置 right: -rightWidth
       */
      margin-left: -220px;
      /* 
        3. left、right设置上各自的宽度
       */
      width: 220px;
    }

    .middle {
      /* 
        4. middle设置width: 100%
       */
      width: 100%;
      height: 100%;
    }

    .inner {
      margin: 0 220px 0 200px;
      min-height: 130px;
      word-break: break-all;
    }
  </style>
</head>

<body>
  <div class="header">header</div>
  <div class="container">
    <div class="middle">
      <div class="inner">
        <h4>middle</h4>
        <p>
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddle
        </p>
      </div>
    </div>
    <div class="left">
      <h4>left</h4>
      <p>
        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
      </p>
    </div>
    <div class="right">
      <h4>right</h4>
      <p>
        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightright
      </p>
    </div>
  </div>
  <div class="footer">footer</div>
</body>

</html>