这篇文章主要给大家分享css实现三列自适应布局的方法，本文给大家介绍了五种方法，为了按照常规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>

实现效果

第二种：基于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>

实现效果

第三种：基于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>

实现效果

第四种：基于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>

实现效果

第五种：基于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实现三列自适应布局的方法，大家可以关注其它的相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS子元素的div水平垂直居中怎么做，方法是什么

  这篇文章主要介绍了CSS实现子元素div水平垂直居中的示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS中fixed定位特点和应用场景是什么，如何使用

  本篇文章给大家带来了关于css的相关知识，其中主要介绍了关于CSS定位属性中fixed 定位的相关问题，fixed定位表示元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动，下面一起来看一下，希望对大家有帮助。

• CSS中文字自动和强制换行及不换行的代码是什么

  这篇文章主要介绍了css页面文字的各种换行方法是什么的内容，包括页面文字不换行、自动换行、强制换行等，小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇文章能帮助大家解决问题。

• 用AmazeUI如何实现输入框组，代码是什么

  这篇文章主要介绍了AmazeUI 输入框组的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• HTML中边框样式属性有哪些，怎样用的？

  本文主要带大家来了解下HTML表格标记入门知识之边框样式属性的内容，这里详细介绍了此属性的应用方法，对朋友们学习很有帮助，下面就小编来一探究竟。