南强小屋 Design By 杰米

前言

为了按照常规WEB布局,这里全部采用拥有header和footer模式进行左中右布局编写。

第一种:基于float实现

实现思路

常规思路,使左右两个Aside分别浮动至左右两侧即可

代码实现

<!-- HTML部分 -->
<div class="container">
  <!-- 顶部Header -->
  <header>这里是头部</header>
  <!-- 中间aside及content -->
  <div class="middle clearfix">
    <aside class="left"></aside>
    <aside class="right"></aside>
    <!-- 中间content显示内容 为了防止将右侧挤下去故放置在右侧栏下方 -->
    <div class="content">这里是内容</div>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS部分 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  .clearfix {
    zoom: 1;
    &::after {
      display: block;
      content: ' ';
      clear:both
    }
  }
  
  html, body {
    width: 100%;
    height: 100%
    }
    .container {
      width: 100%
      height: 100%
      header {
        height: 80px;
        background: rgba(0, 0, 0, 0.5)
      }
      footer {
        height: 80px;
        background: rgba(0, 0, 0, 0.5)
      }
      .middle {
        height: calc(100% - 80px - 80px)
        aside {
          height: 100%;
          width: 300px;
          background: rgba(156, 154, 249, 1)
        }
        .left {
          float: left
        }
        .right: {
          float: right
        }
      }
    }
  }
</style>

实现效果

详解CSS多种三列自适应布局实现

第二种:基于position:absolute实现

实现思路

为中间三栏父级赋予position: relative,赋予左右Aside position: absolute,并且分别赋予left: 0 right: 0 width:自定义值,赋予中间content left,right 分别等于左右width即可

代码实现

<!-- HTML相关代码 -->
<div class="container">
  <!-- 顶部Header -->
  <header></header>
  <div class="middle">
    <!-- 左侧Aside -->
    <aside class="left"></aside>
    <!-- 中间content内容 -->
    <div class="content">这里是内容</div>
    <!-- 右侧Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS相关代码 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0
  }
  
  html, body {
    width: 100%;
    height: 100%
  }
  
  .container {
    width: 100%;
    height: 100%;
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      height: calc(100% - 80px - 80px);
      position: relative;
      aside,
      .content {
        position: absolute;
      }
      .left {
        width: 300px;
        background: rgba(156, 154, 249, 1);
        left: 0;
        height: 100%;
      }
      .right {
        width: 300px;
        background: rgba(156, 154, 249, 1);
        right: 0;
        height: 100%;
      }
      .content {
        left: 300px;
        right: 300px;
      }
    }
  }
</style>

实现效果

详解CSS多种三列自适应布局实现

第三种:基于display:flex实现

实现思路

赋予左中右三列父级display: flex,赋予左右Aside width自定义,赋予中间content flex:1即可

代码实现

<!-- HTML相关代码 -->
<div class="container">
  <!-- 顶部Header -->
  <header></header>
  <div class="middle">
    <!-- 左侧Aside -->
    <aside class="left"></aside>
    <!-- 中间content内容 -->
    <div class="content">这里是内容</div>
    <!-- 右侧Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS部分 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  .container {
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      display: flex;
      height: calc(100% - 80px - 80px);
      aside {
        width: 300px;
        background: rgba(156, 154, 249, 1);
      }
      .content: {
        flex: 1;
      }
    }
  }
</style>

实现效果

详解CSS多种三列自适应布局实现

第四种:基于display: table实现

实现思路

赋予左中右三列父级display: table, width: 100%,分别赋予左中右三列display: table-cell,分别赋予左右Aside width即可。

代码实现

<!-- HTML相关代码 -->
<div class="container">
  <!-- 顶部Header -->
  <header></header>
  <div class="middle">
    <!-- 左侧Aside -->
    <aside class="left"></aside>
    <!-- 中间content内容 -->
    <div class="content">这里是内容</div>
    <!-- 右侧Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS部分 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  .container {
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      display: table;
      width: 100%
      height: calc(100% - 80px - 80px);
      aside {
        width: 300px;
        display: table-cell;
        background: rgba(156, 154, 249, 1);
      }
      .content: {
        display: table-cell;
      }
    }
  }
</style>

实现效果

详解CSS多种三列自适应布局实现

第五种:基于display: grid实现

实现思路

赋予左中右三列父级display: grid,并且使用grid-template-columns: 300px auto 300px,将其分为宽为300px、auto、300px三列布局即可。

代码实现

<!-- HTML相关代码 -->
<div class="container">
  <!-- 顶部Header -->
  <header></header>
  <div class="middle">
    <!-- 左侧Aside -->
    <aside class="left"></aside>
    <!-- 中间content内容 -->
    <div class="content">这里是内容</div>
    <!-- 右侧Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 底部Footer -->
  <footer></footer>
</div>
<!-- CSS部分 -->
<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  .container {
    header {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    footer {
      height: 80px;
      background: rgba(0, 0, 0, 0.5);
    }
    .middle {
      display: grid;
      grid-template-columns: 300px auto 300px;
      height: calc(100% - 80px - 80px);
      aside {
        background: rgba(156, 154, 249, 1);
      }
    }
  }
</style>

实现效果

详解CSS多种三列自适应布局实现

标签:
CSS,三列自适应布局,三列布局

南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米

评论“详解CSS多种三列自适应布局实现”

暂无详解CSS多种三列自适应布局实现的评论...

福利放送 2024/3/29

跑跑卡丁车单机版 2020-11-1(可与AI一起玩) 天翼云/百度云