Explain in detail the implementation of various three column adaptive layouts in CSS

Time:2021-10-16

preface

In order to follow the normal web layout, the left, middle and right layout is written in the mode of having header and footer.

The first is based on float

Realization idea

Conventional thinking, make the left and right asides float to the left and right sides respectively

code implementation

<!--  HTML section -- >
<div class="container">
  <!--  Top header -- >
  < header > here is the header < / header >
  <!--  Intermediate aside and content -- >
  <div class="middle clearfix">
    <aside class="left"></aside>
    <aside class="right"></aside>
    <!--  The content displayed in the middle is placed under the right column in order to prevent the right side from being squeezed down -- >
    < div class = "content" > here is the content < / div >
  </div>
  <!--  Bottom footer -- >
  <footer></footer>
</div>
<!--  CSS section -- >
<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>

Realization effect

The second is based on position: absolute

Realization idea

Give the parent of the middle three columns position: relative, left and right aside position: absolute, left: 0 right: 0 width: user-defined values respectively, and give the middle content left and right equal to the left and right width respectively

code implementation

<!--  HTML related code -- >
<div class="container">
  <!--  Top header -- >
  <header></header>
  <div class="middle">
    <!--  Left side aside -- >
    <aside class="left"></aside>
    <!--  Middle content -- >
    <div   Class = "content" > here is the content < / div >
    <!--  Right side aside -- >
    <aside class="right"></aside>
  </div>
  <!--  Bottom footer -- >
  <footer></footer>
</div>
<!--  CSS related code -- >
<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>

Realization effect

The third is based on display: flex

Realization idea

Give the left, middle and right columns of parent display: flex, left and right aside width customization, and middle content flex: 1

code implementation

<!--  HTML related code -- >
<div class="container">
  <!--  Top header -- >
  <header></header>
  <div class="middle">
    <!--  Left side aside -- >
    <aside class="left"></aside>
    <!--  Middle content -- >
    < div class = "content" > here is the content < / div >
    <!--  Right side aside -- >
    <aside class="right"></aside>
  </div>
  <!--  Bottom footer -- >
  <footer></footer>
</div>
<!--  CSS section -- >
<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>

Realization effect

The fourth is based on display: table

Realization idea

Give the left, middle and right columns of parent display: table, width: 100%, respectively give the left, middle and right columns of display: table cell, and respectively give the left, middle and right aside width.

code implementation

<!--  HTML related code -- >
<div class="container">
  <!--  Top header -- >
  <header></header>
  <div class="middle">
    <!--  Left side aside -- >
    <aside class="left"></aside>
    <!--  Middle content -- >
    < div class = "content" > here is the content < / div >
    <!--  Right side aside -- >
    <aside class="right"></aside>
  </div>
  <!--  Bottom footer -- >
  <footer></footer>
</div>
<!--  CSS section -- >
<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>

Realization effect

The fifth is based on display: grid

Realization idea

Give the parent display: grid to the left, middle and right columns, and use grid template columns: 300px auto 300px to divide it into three columns with a width of 300px, auto and 300px.

code implementation

<!--  HTML related code -- >
<div class="container">
  <!--  Top header -- >
  <header></header>
  <div class="middle">
    <!--  Left side aside -- >
    <aside class="left"></aside>
    <!--  Middle content -- >
    < div class = "content" > here is the content < / div >
    <!--  Right side aside -- >
    <aside class="right"></aside>
  </div>
  <!--  Bottom footer -- >
  <footer></footer>
</div>
<!--  CSS section -- >
<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>

Realization effect

This is the end of this article about the detailed implementation of CSS three column adaptive layout. For more information about CSS three column adaptive layout, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]