devbox
空白诗007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS之布局系列--三列布局(两边固定，中间自适应)--方法/实例_两边固定 中间自适应的布局

作者：空白诗007 | 2024-07-12 01:57:45

赞

踩

两边固定 中间自适应的布局

原文网址：CSS之布局系列--三列布局(两边固定，中间自适应)--方法/实例_IT利刃出鞘的博客-CSDN博客

简介

本文用示例介绍CSS三列布局的方案。

三列布局，即：左，中，右。有两种方案：1.两边固定，中间自适应；2.中间固定，两边自适应。本文介绍第1种方案。

两边固定，中间自适应，一共有如下几种方案：

  1. flex布局（推荐）
  2. 网格布局（grid)
  3. 浮动布局（float）
  4. 圣杯布局
  5. 双飞翼布局
  6. 表格布局（table）（不推荐）
  7. 绝对定位布局（不推荐）

想要达到的效果：

下边所有的方案的结果都跟上图一样。 

方案1：flex(推荐)

简介

flex是css3提供的一种新的布局方式，这种布局的产生就是为了实现自适应布局，它是随着移动互联网时代产生而引进的。

本方案是实现自适应布局的最佳方案。

父元素设置display: flex之后，子元素float，vertical-align，clear失效

优点

  1. 简单
  2. 维护性好

缺点

  1. 不兼容旧浏览器

示例

代码

  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>This is title</title>
  7.     <style>
  8.         html, body {
  9.             margin: 0; /*若不设置，默认为8px*/
  10.         }
  11.  
  12.         .container>div {
  13.             height: 100px;
  14.         }
  15.  
  16.         .container {
  17.             display: flex;
  18.         }
  19.  
  20.         .aside-left {
  21.             width: 300px;
  22.             background-color: #a9ff29;
  23.         }
  24.  
  25.         .middle {
  26.             flex: 1;
  27.             background-color: #ffb91b;
  28.         }
  29.  
  30.         .aside-right {
  31.             width: 200px;
  32.             background-color: #40c3ff;
  33.         }
  34.     </style>
  35. </head>
  36.  
  37. <body>
  38.  
  39. <div class="container">
  40.     <div class="aside-left">左侧</div>
  41.     <div class="middle">中间</div>
  42.     <div class="aside-right">右侧</div>
  43. </div>
  44.  
  45. </body>
  46. </html>

方案2：网格(grid)

简介

网格布局是比较新的东西，这个布局是新的css标准下的特性。在响应式布局大行其道的移动互联网时代，bootstrap之类的是对栅格化布局框架非常流行，而网格布局，就是对栅格布局的标准化实现。

优点

  1. 简单、清晰

缺点

  1. 不兼容旧浏览器。（因为是新CSS标准的特性）

代码

  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>This is title</title>
  7.     <style>
  8.         html, body {
  9.             margin: 0; /*若不设置，默认为8px*/
  10.         }
  11.  
  12.         .container {
  13.             display: grid;
  14.             width: 100%;
  15.             grid-template-rows: 100px;
  16.             grid-template-columns: 300px auto 200px;
  17.         }
  18.  
  19.         .aside-left {
  20.             background-color: #a9ff29;
  21.         }
  22.  
  23.         .middle {
  24.             background-color: #ffb91b;
  25.         }
  26.  
  27.         .aside-right {
  28.             background-color: #40c3ff;
  29.         }
  30.     </style>
  31. </head>
  32.  
  33. <body>
  34.  
  35. <div class="container">
  36.     <div class="aside-left">左侧</div>
  37.     <div class="middle">中间</div>
  38.     <div class="aside-right">右侧</div>
  39. </div>
  40.  
  41. </body>
  42. </html>

方案3：浮动(float)

优点

  1. 兼容旧浏览器

缺点

  1. 主体内容需要放到最后，当页面元素较多时候对开发不友好。

示例

必须把中间的元素写到最后，即：左、右、中。

代码

  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>This is title</title>
  7.     <style>
  8.         html, body {
  9.             margin: 0; /*若不设置，默认为8px*/
  10.         }
  11.  
  12.         .container>div {
  13.             height: 100px;
  14.         }
  15.  
  16.         .aside-left {
  17.             float: left;
  18.             width: 300px;
  19.             background-color: #a9ff29;
  20.         }
  21.  
  22.         .middle {
  23.             background-color: #ffb91b;
  24.         }
  25.  
  26.         .aside-right {
  27.             float: right;
  28.             width: 200px;
  29.             background-color: #40c3ff;
  30.         }
  31.     </style>
  32. </head>
  33.  
  34. <body>
  35.  
  36. <div class="container">
  37.     <div class="aside-left">左侧</div>
  38.     <div class="aside-right">右侧</div>
  39.     <!-- 必须放到最后 -->
  40.     <div class="middle">中间</div>
  41. </div>
  42.  
  43. </body>
  44. </html>

结果

错误示例

如果按照正常的顺序写元素：左、中、右，将不会达到预期。

代码

  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>This is title</title>
  7.     <style>
  8.         html, body {
  9.             margin: 0; /*若不设置，默认为8px*/
  10.         }
  11.  
  12.         .container>div {
  13.             height: 100px;
  14.         }
  15.  
  16.         .aside-left {
  17.             float: left;
  18.             width: 300px;
  19.             background-color: #a9ff29;
  20.         }
  21.  
  22.         .middle {
  23.             background-color: #ffb91b;
  24.         }
  25.  
  26.         .aside-right {
  27.             float: right;
  28.             width: 200px;
  29.             background-color: #40c3ff;
  30.         }
  31.     </style>
  32. </head>
  33.  
  34. <body>
  35.  
  36. <div class="container">
  37.     <div class="aside-left">左侧</div>
  38.     <div class="middle">中间</div>
  39.     <div class="aside-right">右侧</div>
  40. </div>
  41.  
  42. </body>
  43. </html>

方案4：圣杯

简介

        圣杯布局并不是因为长得像杯子，在西方，圣杯是表达“渴求之物”的意思。下面回来看它的实现：首先我们的目的是要实现中间部分先加载，所以html结构大体上是确定的。

优点

  1. 兼容旧浏览器
  2. 可以实现中间部分优先加载

缺点

  1. 处理复杂
  2. 当中间元素小于两侧元素时候会出现变形
  3. 响应能力差

第1步：给元素添加左浮动效果

  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>This is title</title>
  7.     <style>
  8.         html, body {
  9.             margin: 0; /*若不设置，默认为8px*/
  10.         }
  11.  
  12.         .container>div {
  13.             height: 100px;
  14.         }
  15.  
  16.         .aside-left {
  17.             float: left;
  18.             width: 300px;
  19.             background-color: #a9ff29;
  20.         }
  21.  
  22.         .middle {
  23.             float: left;
  24.             width: 100%;
  25.             background-color: #ffb91b;
  26.         }
  27.  
  28.         .aside-right {
  29.             float: left;
  30.             width: 200px;
  31.             background-color: #40c3ff;
  32.         }
  33.     </style>
  34. </head>
  35.  
  36. <body>
  37.  
  38. <div class="container">
  39.     <div class="middle">中间</div>
  40.     <div class="aside-left">左侧</div>
  41.     <div class="aside-right">右侧</div>
  42. </div>
  43.  
  44. </body>
  45. </html>

结果

第2步：为左右元素设置负的margin值

        设置左边元素左边距为负的中间盒子的宽度，也就是.left {margin-left:-100%;}。设置右边元素左边距为负的自己的宽度，也就是.right {margin-left：-300px;}，

  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>This is title</title>
  7.     <style>
  8.         html, body {
  9.             margin: 0; /*若不设置，默认为8px*/
  10.         }
  11.  
  12.         .container>div {
  13.             height: 100px;
  14.         }
  15.  
  16.         .aside-left {
  17.             float: left;
  18.             width: 300px;
  19.             margin-left: -100%;
  20.             background-color: #a9ff29;
  21.         }
  22.  
  23.         .middle {
  24.             float: left;
  25.             width: 100%;
  26.             background-color: #ffb91b;
  27.         }
  28.  
  29.         .aside-right {
  30.             float: left;
  31.             width: 200px;
  32.             margin-left: -200px;
  33.             background-color: #40c3ff;
  34.         }
  35.     </style>
  36. </head>
  37.  
  38. <body>
  39.  
  40. <div class="container">
  41.     <div class="middle">中间</div>
  42.     <div class="aside-left">左侧</div>
  43.     <div class="aside-right">右侧</div>
  44. </div>
  45.  
  46. </body>
  47. </html>

 结果

此时中间元素被压在下面，还需要进一步处理。

第3步：把左右元素放在中间元素两边

        要把左右元素放在中间元素两边，就需要让两边有边距，所以首先要给父元素加一个内边距，即添加padding: 0 200px 0 300px;。

代码

  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>This is title</title>
  7.     <style>
  8.         html, body {
  9.             margin: 0; /*若不设置，默认为8px*/
  10.         }
  11.  
  12.         .container>div {
  13.             height: 100px;
  14.         }
  15.  
  16.         .container {
  17.             padding: 0 300px;
  18.         }
  19.  
  20.         .aside-left {
  21.             float: left;
  22.             width: 300px;
  23.             margin-left: -100%;
  24.             background-color: #a9ff29;
  25.         }
  26.  
  27.         .middle {
  28.             float: left;
  29.             width: 100%;
  30.             background-color: #ffb91b;
  31.         }
  32.  
  33.         .aside-right {
  34.             float: left;
  35.             width: 200px;
  36.             margin-left: -200px;
  37.             background-color: #40c3ff;
  38.         }
  39.     </style>
  40. </head>
  41.  
  42. <body>
  43.  
  44. <div class="container">
  45.     <div class="middle">中间</div>
  46.     <div class="aside-left">左侧</div>
  47.     <div class="aside-right">右侧</div>
  48. </div>
  49.  
  50. </body>
  51. </html>

结果

此时两边已经产生边距，不过两边元素还是在中间元素上面显示。

第4步：把两边的元素加相对定位，把它们定位到两边空位处

左元素添加：position: relative; left: -300px;

右元素添加：position: relative; right: -300px;

代码

  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>This is title</title>
  7.     <style>
  8.         html, body {
  9.             margin: 0; /*若不设置，默认为8px*/
  10.         }
  11.  
  12.         .container>div {
  13.             height: 100px;
  14.         }
  15.  
  16.         .container {
  17.             padding: 0 200px 0 300px;
  18.         }
  19.  
  20.         .aside-left {
  21.             float: left;
  22.             width: 300px;
  23.             margin-left: -100%;
  24.             position: relative;
  25.             left: -300px;
  26.             background-color: #a9ff29;
  27.         }
  28.  
  29.         .middle {
  30.             float: left;
  31.             width: 100%;
  32.             background-color: #ffb91b;
  33.         }
  34.  
  35.         .aside-right {
  36.             float: left;
  37.             width: 200px;
  38.             margin-left: -200px;
  39.             position: relative;
  40.             right: -200px;
  41.             background-color: #40c3ff;
  42.         }
  43.     </style>
  44. </head>
  45.  
  46. <body>
  47.  
  48. <div class="container">
  49.     <div class="middle">中间</div>
  50.     <div class="aside-left">左侧</div>
  51.     <div class="aside-right">右侧</div>
  52. </div>
  53.  
  54. </body>
  55. </html>

结果

方案5：双飞翼

简介

        这种实现方案来自淘宝的UED，叫做双飞翼布局。

        双飞翼布局的html结构和圣杯布局有一点小差别，就是中间元素外面多了一层容器。

优点

  1. 兼容旧浏览器
  2. 比圣杯简单
  3. 响应比圣杯好

缺点

  1. 需要在中间元素上加容器

示例

        前两步的样式设置和和圣杯布局是相同的，元素左浮动，两侧-margin，最终产生了和上面相同的元素被遮盖的情况。

        接下来，也是双飞翼布局的特点所在，由于实际中间元素是放在一个容器里面的，我们可以给内部元素设置外边距，这样就可以让出两边的位置，两边元素也无需重定位即可完成布局。

代码

  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>This is title</title>
  7.     <style>
  8.         html, body {
  9.             margin: 0; /*若不设置，默认为8px*/
  10.         }
  11.  
  12.         .container>div {
  13.             height: 100px;
  14.         }
  15.  
  16.         .aside-left {
  17.             float: left;
  18.             width: 300px;
  19.             margin-left: -100%;
  20.             background-color: #a9ff29;
  21.         }
  22.  
  23.         .middle-container {
  24.             float: left;
  25.             width: 100%;
  26.             background-color: #ffb91b;
  27.         }
  28.  
  29.         .middle {
  30.             margin: 0 200px 0 300px;
  31.         }
  32.  
  33.         .aside-right {
  34.             float: left;
  35.             width: 200px;
  36.             margin-left: -200px;
  37.             background-color: #40c3ff;
  38.         }
  39.     </style>
  40. </head>
  41.  
  42. <body>
  43.  
  44. <div class="container">
  45.     <div class="middle-container">
  46.         <div class="middle">中间</div>
  47.     </div>
  48.     <div class="aside-left">左侧</div>
  49.     <div class="aside-right">右侧</div>
  50. </div>
  51.  
  52. </body>
  53. </html>

方案6：表格(不推荐)

简介

把三列都看做是表格，控制表格的显示情况即可。

优点

  1. 简单
  2. 兼容旧浏览器（因为表格是兼容旧浏览器的）

缺点

  1. 不灵活。（边框设置、高度设置等等都有很大受限）

代码

  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>This is title</title>
  7.     <style>
  8.         html, body {
  9.             margin: 0; /*若不设置，默认为8px*/
  10.         }
  11.  
  12.         .container>div {
  13.             height: 100px;
  14.             display: table-cell;
  15.         }
  16.  
  17.         .container {
  18.             display: table;
  19.             width: 100%;
  20.         }
  21.  
  22.         .aside-left {
  23.             width: 300px;
  24.             background-color: #a9ff29;
  25.         }
  26.  
  27.         .middle {
  28.             background-color: #ffb91b;
  29.         }
  30.  
  31.         .aside-right {
  32.             width: 200px;
  33.             background-color: #40c3ff;
  34.         }
  35.     </style>
  36. </head>
  37.  
  38. <body>
  39.  
  40. <div class="container">
  41.     <div class="aside-left">左侧</div>
  42.     <div class="middle">中间</div>
  43.     <div class="aside-right">右侧</div>
  44. </div>
  45.  
  46. </body>
  47. </html>

方案7：绝对定位(不推荐)

优点

  1. 兼容旧浏览器
  2. 简单

缺点

  1. 脱离文档流，可维护性很差

代码

  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>This is title</title>
  7.     <style>
  8.         html, body {
  9.             margin: 0; /*若不设置，默认为8px*/
  10.         }
  11.  
  12.         .container>div {
  13.             height: 100px;
  14.             position: absolute;
  15.         }
  16.  
  17.         .aside-left {
  18.             left: 0;
  19.             width: 300px;
  20.             background-color: #a9ff29;
  21.         }
  22.  
  23.         .middle {
  24.             left: 300px;
  25.             right: 200px;
  26.             background-color: #ffb91b;
  27.         }
  28.  
  29.         .aside-right {
  30.             right: 0;
  31.             width: 200px;
  32.             background-color: #40c3ff;
  33.         }
  34.     </style>
  35. </head>
  36.  
  37. <body>
  38.  
  39. <div class="container">
  40.     <div class="aside-left">左侧</div>
  41.     <div class="middle">中间</div>
  42.     <div class="aside-right">右侧</div>
  43. </div>
  44.  
  45. </body>
  46. </html>

其他网址

css三列布局--两边固定中间自适应和中间固定两边自适应_DOM曼珠沙华的博客-CSDN博客css两边固定中间自适应布局 - 掘金css三列布局--两边固定中间自适应和中间固定两边自适应_DOM曼珠沙华的博客-CSDN博客

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/812309?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号