当前位置：Gxlcms > css > CSS的三栏布局详解

CSS的三栏布局详解

时间：2021-07-01 10:21:17 帮助过：46人阅读

这次给大家带来CSS的三栏布局详解，CSS的三栏布局的注意事项有哪些，下面就是实战案例，一起来看一下。

本文介绍了CSS经典三栏布局方案，分享给大家，也给自己做个笔记，具体如下：

三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见

1. float布局

最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏：

  1.     <style>
  2.       .left {
  3.         float: left;
  4.         width: 100px;
  5.         height: 200px;
  6.         background-color: red;
  7.       }
  8.     
  9.       .right {
  10.         float: right;
  11.         width: 100px;
  12.         height: 200px;
  13.         background-color: yellow;
  14.       }
  15.     </style>
  16.       
  17.       <p class="container">
  18.         <p class="left"></p>
  19.         <p class="right"></p>
  20.         <p class="main"></p>
  21.       </p>

此时可以得到左右两栏分布：

接下来再来看中间栏如何处理。我们知道对于float元素，其会脱离文档流，其他盒子也会无视这个元素。（但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。）所以此时只需在container容器内添加一个正常的p，其会无视left和right，撑满整个container，只需再加上margin为left right流出空间即可：

  1.    <style>
  2.       .left {
  3.         float: left;
  4.         width: 100px;
  5.         height: 200px;
  6.         background-color: red;
  7.       }
  8.     
  9.       .right {
  10.         float: right;
  11.         width: 100px;
  12.         height: 200px;
  13.         background-color: yellow;
  14.       }
  15.     
  16.       .main {
  17.         background-color: green;
  18.         height: 200px;
  19.         margin-left: 120px;
  20.         margin-right: 120px;
  21.       }
  22.     
  23.       .container {
  24.         border: 1px solid black;
  25.       }
  26.     
  27.       <p class="container">
  28.       <p class="left"></p>
  29.       <p class="right"></p>
  30.       <p class="main"></p>
  31.       </p>

优势：简单

劣势：中间部分最后加载，内容较多时影响体验

2. BFC 规则

BFC(块格式化上下文)规则规定：BFC不会和浮动元素重叠。所以如果将main元素设定为BFC元素即可：

  1.     <style>
  2.       .left {
  3.         float: left;
  4.         width: 100px;
  5.         height: 200px;
  6.         background-color: red;
  7.       }
  8.     
  9.       .right {
  10.         float: right;
  11.         width: 100px;
  12.         height: 200px;
  13.         background-color: yellow;
  14.       }
  15.     
  16.       .main {
  17.         background-color: green;
  18.         height: 200px;
  19.         overflow: hidden;
  20.       }
  21.     
  22.       <p class="container">
  23.         <p class="left"></p>
  24.         <p class="right"></p>
  25.         <p class="main"></p>
  26.       </p>

3. 圣杯布局

圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整。

第一步，先来看下基本布局

  1.     <style>
  2.         .left {
  3.             float: left;
  4.             width: 100px;
  5.             height: 200px;
  6.             background-color: red;
  7.         }
  8.         .right {
  9.             float: left;
  10.             width: 100px;
  11.             height: 200px;
  12.             background-color: yellow;
  13.         }
  14.         .main {
  15.             float: left;
  16.             width: 100%;
  17.             height: 200px;
  18.             background-color: blue;
  19.         }
  20.     </style>
  21.     <body>
  22.         <p class="container">
  23.             <p class="main"></p>
  24.             <p class="left"></p>
  25.             <p class="right"></p>
  26.         </p>
  27.     </body>

此时看到的效果是：左、右两栏被挤到第二行。这是因为main的宽度为100%。接下来我们通过调整左、右两栏的margin来将左、中、右放在一行中：

  1.         .left {
  2.             float: left;
  3.             width: 100px;
  4.             height: 200px;
  5.             margin-left: -100%;
  6.             background-color: red;
  7.         }
  8.         .right {
  9.             float: left;
  10.             width: 100px;
  11.             height: 200px;
  12.             margin-left: -100px;
  13.             background-color: yellow;
  14.         }

第二步，将left的margin-left设置为-100%，此时左栏会移动到第一行的首部。然后再将right的margin-left设置为其宽度的负值：-100px，则右栏也会移动到和左、中栏一行中：

不过此时还没有大功告成，我们试着在main中加入一些文字：

  1.     <body>
  2.         <p class="container">
  3.             <p class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</p>
  4.             <p class="left"></p>
  5.             <p class="right"></p>
  6.         </p>
  7.     </body>

可以看到文字被压住了，接下来就要解决这个问题。

第三步，给container一个padding，该padding应该正好等于左、右栏的宽度：

  1.         .container {
  2.             padding-left: 100px;
  3.             padding-right: 100px;
  4.         }

此时看到的结果是左、中、右三栏都整体收缩了，但文字依然被压住了。

第四步，给左、右两栏加上相对布局，然后再通过设置left和right值向外移动：

  1.         .left {
  2.             float: left;
  3.             width: 100px;
  4.             height: 200px;
  5.             margin-left: -100%;
  6.             position: relative;
  7.             left: -100px;
  8.             background-color: red;
  9.         }
  10.         .right {
  11.             float: left;
  12.             width: 100px;
  13.             height: 200px;
  14.             margin-left: -100px;
  15.             position: relative;
  16.             right: -100px;
  17.             background-color: yellow;
  18.         }

到此为止，大功告成：

4. 双飞翼布局

双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同：

既然main部分的内容会被遮挡，那么就在main内部再加一个content，通过设置其margin来避开遮挡，问题也就可以解决了：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <style>
  5.         .main {
  6.         float: left;
  7.         width: 100%;
  8.         }
  9.         .content {
  10.         height: 200px;
  11.         margin-left: 110px;
  12.         margin-right: 220px;
  13.         background-color: green;
  14.         }
  15.         
  16.         .main::after {
  17.         display: block;
  18.         content: '';
  19.         font-size: 0;
  20.         height: 0;
  21.         clear: both;
  22.         zoom: 1;
  23.         }
  24.     .left {
  25.         float: left;
  26.         height: 200px;
  27.         width: 100px;
  28.         margin-left: -100%;
  29.         background-color: red;
  30.     }
  31.     .right {
  32.         width: 200px;
  33.         height: 200px;
  34.         float: left;
  35.         margin-left: -200px;
  36.         background-color: blue;
  37.     }   
  38.     </style>
  39. </head>
  40. <body>
  41.     <p class="main">
  42.         <p class="content"></p>
  43.     </p>
  44.     <p class="left"></p>
  45.     <p class="right"></p>
  46. </body>
  47. </html>

唯一需要注意的是，需要在main后面加一个元素来清除浮动。

5. flex布局

flex布局是趋势，利用flex实现三栏布局也很简单，不过需要注意浏览器兼容性：

  1.         <style type="text/css">
  2.             .container {
  3.                 display: flex;
  4.                 flex-direction: row;
  5.             }
  6.             .middle {
  7.                 height: 200px;
  8.                 background-color: red;
  9.                 flex-grow: 1;
  10.             }
  11.             .left {
  12.                 height: 200px;
  13.                 order: -1;
  14.                 margin-right: 20px;
  15.                 background-color: yellow;
  16.                 flex: 0 1 200px;
  17.             }
  18.             .right {
  19.                 height: 200px;
  20.                 margin-left: 20px;
  21.                 background-color: green;
  22.                 flex: 0 1 200px;
  23.             }
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <p class="container">
  28.             <p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
  29.             <p class="left"></p>
  30.             <p class="right"></p>
  31.         </p>
  32.     </body>

有几点需要注意一下：

  1. main要首先加载就必须写在第一位，但因为left需要显示在最左侧，所以需要设置left的order为-1

  2. flex属性的完整写法是：flex: flex-grow flex-shrink flex-basis 。这也是flex实现三栏布局的核心，main设置flex-grow为1，说明多余空间全部给main，而空间不够时，仅缩小left right部分，同时因为指定了left right部分的flex-basis，所以指定了两者的宽度，保证其显示效果

6. 绝对定位

绝对定位的方式也比较简单，而且可以优先加载主体：

  1.         <style type="text/css">
  2.             .container {
  3.             }
  4.             .middle {
  5.                 position: absolute;
  6.                 left: 200px;
  7.                 right: 200px;
  8.                 height: 300px;
  9.                 background-color: yellow;
  10.             }
  11.             .left {
  12.                 position: absolute;
  13.                 left: 0px;
  14.                 width: 200px;
  15.                 height: 300px;
  16.                 background-color: red;
  17.             }
  18.             .right {
  19.                 position: absolute;
  20.                 right: 0px;
  21.                 width: 200px;
  22.                 background-color: green;
  23.                 height: 300px;
  24.             }
  25.         </style>
  26.     </head>
  27.     <body>
  28.         <p class="container">
  29.             <p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
  30.             <p class="left"></p>
  31.             <p class="right"></p>
  32.         </p>
  33.     </body>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

CSS怪异盒模型和标准盒模型如何使用

CSS实现手风琴布局

以上就是CSS的三栏布局详解的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！