css 实现三栏布局（圣杯布局）的5种方法

效果图：

1、浮动：设置float: left;，配合负margin来实现

　　.left {
          float: left;
          width: 100px;
          height: 200px;
          background-color: red;
      }
 
      .right {
          float: right;
          width: 100px;
          height: 200px;
          background-color: yellow;
      }
 
      .main {
          background-color: green;
          height: 200px;
          margin-left: 120px;
          margin-right: 120px;
      }
 
      .container {
          border: 1px solid black;
      }
 
<div class="container">
      <div class="left"></div>
      <div class="right"></div>
      <div class="main">float布局、float布局、</div>
  </div>

　　2、圣杯布局:两端宽度固定，中间自适应

　　　.container1 {
          padding-left: 100px;
          padding-right: 100px;
      }
 
      .main1 {
          float: left;
          width: 100%;
          height: 200px;
          background-color: blue;
      }
 
      .left1 {
          float: left;
          width: 100px;
          height: 200px;
          margin-left: -100%;
          position: relative;
          left: -100px;
          background-color: red;
      }
 
      .right1 {
          float: left;
          width: 100px;
          height: 200px;
          margin-left: -100px;
          position: relative;
          right: -100px;
          background-color: yellow;
      }
<div class="container1">
      <div class="main1">圣杯布局、圣杯布局、圣杯布局、圣杯布局、圣杯布局、圣杯布局</div>
      <div class="left1"></div>
      <div class="right1"></div>
  </div>

　　3、双飞翼布局

      .main2 {
          float: left;
          width: 100%;
      }
 
      .content2 {
          height: 200px;
          margin-left: 110px;
          margin-right: 110px;
          background-color: green;
      }
 
      .left2 {
          float: left;
          height: 200px;
          width: 100px;
          margin-left: -100%;
          background-color: red;
      }
 
      .right2 {
          width: 100px;
          height: 200px;
          float: left;
          margin-left: -100px;
          background-color: blue;
      }
 
      /* 清除浮动 */
      .container2::after {
          display: block;
          content: '';
          font-size: 0;
          height: 0;
          clear: both;
          zoom: 1;
      }    
 
<div class="container2">
      <div class="main2">
          <div class="content2">双飞翼布局、双飞翼布局、双飞翼布局、双飞翼布局、双飞翼布局、双飞翼布局</div>
      </div>
      <div class="left2"></div>
      <div class="right2"></div>
  </div>

　　4、flex布局

    .container3 {
        display: flex;
        height: 200px;
    }
 
    .left3 {
        flex: 0 100px;
        background-color: red;
    }
 
    .main3 {
        flex: 1;
        background-color: blue;
    }
 
    .right3 {
        flex: 0 100px;
        background-color: green;
    }
 
<div class="container3">
    <div class="left3"></div>
    <div class="main3">flex布局</div>
    <div class="right3"></div>
</div>

　　5、绝对定位

        .container4 {
         height: 200px;
     }
 
     .container4 div {
         height: 200px;
     }
 
     .left4 {
         position: absolute;
         left: 0px;
         width: 100px;
         background-color: red;
     }
 
     .main4 {
         position: absolute;
         left: 100px;
         right: 100px;
         background-color: yellow;
     }
 
     .right4 {
         position: absolute;
         right: 0px;
         width: 100px;
         background-color: green;
     }
 
<div class="container4">
     <div class="left4"></div>
     <div class="main4">绝对定位、绝对定位、绝对定位、绝对定位、绝对定位 </div>
     <div class="right4"></div>
 </div>

posted on 2023-04-11 11:26 ducky_L 阅读(172) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS 实现垂直居中的5种方法

· css 清楚浮动的4种办法

· html圣杯布局实现思路-三栏布局

· CSS三栏布局

· 圣杯布局 | 双飞翼布局

ducky_L

导航

统计

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

css 实现三栏布局（圣杯布局）的5种方法