三栏布局

最新推荐文章于 2023-10-01 20:09:08 发布

CarolineL

最新推荐文章于 2023-10-01 20:09:08 发布

阅读量517

点赞数 1

分类专栏： CSS 文章标签：三栏布局

本文链接：https://blog.csdn.net/Lxj1107020234/article/details/88959803

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了六种常见的三栏布局实现方法，包括浮动布局、绝对定位、弹性布局flex、浮动和负边距（双飞翼及圣杯布局）、网格布局grid及表格布局table。每种方法都附带了详细的HTML和CSS代码示例，帮助开发者理解和实现。

摘要由CSDN通过智能技术生成

三栏布局一般是两边固定中间自适应，方法与两栏布局相似。

1. 浮动布局

html:
  <div class="container">
    <div class="left">左侧固定</div>
    <div class="right">右侧固定</div>
    <div class="content">自适应区域</div>
  </div>
css:
    .container {
      background-color: #7fffd4;
      overflow: hidden;
    }
    .left {
      float: left;
      width: 300px;
      height: 300px;
      background-color: #fa8072;
    }
    .right {
      float: right;
      width: 300px;
      height: 300px;
      background-color: #dda0dd;
    }
    .content {
      height: 300px;
      background-color: #00ced1;
    }

两边固定中间自适应
特点：

简单，兼容性好
当中间内容高于两侧时，两侧高度不会随中间内容变高而变高，例子中设置了固定的高度

2.绝对定位

html:
  <!-- 绝对定位 -->
  <div class="container">
    <div class="left">左侧固定</div>
    <div class="content">自适应区域</div>
    <div class="right">右侧固定</div>
  </div>
css:
 /* 绝对定位*/
    .container {
      position: relative;
      background-color: #7fffd4;
    }
    .container div{
      height: 400px;
    }
    .left{
      position: absolute;
      left:0;
      width: 300px;
      background-color: #fa8072;
    }
    .right{
      position: absolute;
      right:0;
      width: 300px;
      background-color: #dda0dd;
    }
    .content{
      position: absolute;
      left:300px;
      right: 300px;
      background-color: #00ced1;
    }

在这里插入图片描述
特点

简单、粗暴
采用了 absolute，导致父元素脱离了文档流，那所有的子元素也需要脱离文档流。如果页面复杂，那开发的难度可想而知。

3.弹性布局 flex

html:
  <div class="container">
    <div class="left">左侧固定</div>
    <div class="content">自适应区域</div>
    <div class="right">右侧固定</div>
  </div>
  
 css: 
    .container {
      display: flex;
    }
    .left,
    .right {
      flex: 0 0 300px;
      background-color: #dda0dd;
    }
    .content {
      flex: 1;
      background-color: #00ced1;
    }

两边固定中间自适应
特点

简单、优雅
未来趋势
可在移动端尽情使用
兼容性差一点，不支持 IE8、IE9

4.浮动和负边距

关于负边距的问题，可参看负外边距浮动下的外边距

html:
  <!-- 浮动和负边距 -->
  <div class="container">
    <div class="auto">
      <div class="content">自适应区域</div>
    </div>
    <div class="left">左侧固定</div>
    <div class="right">右侧固定</div>
  </div>

双飞翼布局

  .container div{
      height: 400px;
    }
    /* 双飞翼 */
    .auto{
      float: left;
      width: 100%;
      background-color: #00ced1;
    }
    .content{
      margin-left: 300px;
      margin-right: 300px;
    }
    .left{
      float: left;
      width: 300px;
      margin-left: -100%;
      background-color: #fa8072;
    }
    .right{
      float: left;
      width: 300px;
      margin-left: -300px;
      background-color: #dda0dd;
    }

圣杯布局

	.container div{
      height: 400px;
    }
  /* 圣杯布局  圣杯布局是添加相对定位，并配合 left 和 right 属性，效果上表现为三栏是单独分开的*/
    .container{
      padding-left: 300px;
      padding-right: 300px;
    }
    .auto{
      float: left;
      width: 100%;
      background-color:  #00ced1;
    }
    .left {
      position: relative;
      left: -300px;
      float: left;
      width: 300px;
      margin-left: -100%;
      background-color: #fa8072;
    }

    .right {
      position: relative;
      right: -300px;
      float: left;
      width: 300px;
      margin-left: -300px;
      background-color: #dda0dd;
    }

在这里插入图片描述
特点

兼容性好
中间部分在最上面，可以保证优先渲染
实现相对复杂

5.网格布局 grid

更多细节可以参考：http://www.css88.com/archives/8506

html:
  <div class="container">
    <div class="left">左侧固定</div>
    <div class="content">自适应区域</div>
    <div class="right">右侧固定</div>
  </div>
css:
    /* 网格布局 */
    .container {
      display: grid;
      grid-template-columns: 300px auto 300px;
      grid-template-rows: 400px;
    }

    .left{
      background-color: #fa8072;
    }
    .right {
      background-color: #dda0dd;
    }

    .content {
      background-color: #00ced1;
    }

在这里插入图片描述
特点

简单新颖
兼容性很差

6.表格布局 table

html:
  <!-- 表格布局 -->
  <div class="container">
    <div class="left">左侧固定</div>
    <div class="content">自适应区域</div>
    <div class="right">右侧固定</div>
  </div>
  
css:
    .container {
      width: 100%;
      display: table;
    }
    .container div {
      display: table-cell;
    }
    .left,
    .right {
      width: 300px;
      background-color: #dda0dd;
    }
    .content {
      background-color: #00ced1;
    }