Detailed explanation of CSS multiple three-column adaptive layout implementation

Detailed explanation of CSS multiple three-column adaptive layout implementation

Preface

In order to follow the conventional WEB layout, all of them are written in left-center-right layout with header and footer mode.

The first one: based on float implementation

Implementation ideas

Conventional thinking is to make the left and right Aside float to the left and right sides respectively.

Code Implementation

<!-- HTML section -->
<div class="container">
  <!-- Top Header -->
  <header>Here is the header</header>
  <!-- Aside and content in the middle -->
  <div class="middle clearfix">
    <aside class="left"></aside>
    <aside class="right"></aside>
    <!-- The middle content is placed below the right column to prevent the right side from being squeezed down. -->
    <div class="content">Here is the content</div>
  </div>
  <!-- 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>

Achieve results

The second method: based on position: absolute implementation

Implementation ideas

Assign position: relative to the parent of the three middle columns, and assign position: absolute to the left and right Aside columns, and assign left: 0 and right: 0 width: custom values ​​respectively. Assign the middle content left and right to the same width as the left and right widths respectively.

Code Implementation

<!-- HTML related code-->
<div class="container">
  <!-- Top Header -->
  <header></header>
  <div class="middle">
    <!-- Left Aside -->
    <aside class="left"></aside>
    <!-- Middle content -->
    <div class="content">Here is the content</div>
    <!-- Right Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 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>

Achieve results

The third method: based on display: flex

Implementation ideas

Give the left, middle and right columns parent display: flex, give the left and right Aside widths custom values, and give the middle content flex:1

Code Implementation

<!-- HTML related code-->
<div class="container">
  <!-- Top Header -->
  <header></header>
  <div class="middle">
    <!-- Left Aside -->
    <aside class="left"></aside>
    <!-- Middle content -->
    <div class="content">Here is the content</div>
    <!-- Right Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 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>

Achieve results

The fourth method: based on display: table implementation

Implementation ideas

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

Code Implementation

<!-- HTML related code-->
<div class="container">
  <!-- Top Header -->
  <header></header>
  <div class="middle">
    <!-- Left Aside -->
    <aside class="left"></aside>
    <!-- Middle content -->
    <div class="content">Here is the content</div>
    <!-- Right Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 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>

Achieve results

Fifth: based on display: grid implementation

Implementation ideas

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

Code Implementation

<!-- HTML related code-->
<div class="container">
  <!-- Top Header -->
  <header></header>
  <div class="middle">
    <!-- Left Aside -->
    <aside class="left"></aside>
    <!-- Middle content -->
    <div class="content">Here is the content</div>
    <!-- Right Aside -->
    <aside class="right"></aside>
  </div>
  <!-- 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>

Achieve results

This concludes this article on the detailed explanation of the implementation of various three-column adaptive layouts in CSS. For more relevant CSS three-column adaptive layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<:  Use of select, distinct, and limit in MySQL

>>:  Explore the characteristics and expressions of different spaces in HTML (recommended)

Recommend

Summary of 4 methods of div+css layout to achieve 2-end alignment of css

The div+css layout to achieve 2-end alignment is ...

How to generate Vue user interface by dragging and dropping

Table of contents Preface 1. Technical Principle ...

Mysql database design three paradigm examples analysis

Three Paradigms 1NF: Fields are inseparable; 2NF:...

The difference between html, xhtml and xml

Development Trends: html (Hypertext Markup Languag...

Docker Consul Overview and Cluster Environment Construction Steps (Graphical Explanation)

Table of contents 1. Overview of Docker consul 2....

Vue echarts realizes dynamic display of bar chart

This article shares the specific code of vue echa...

Basic knowledge of website design: newbies please read this

Now many people are joining the ranks of website ...

GET POST Differences

1. Get is used to obtain data from the server, wh...

MySQL helps you understand index pushdown in seconds

Table of contents 1. The principle of index push-...

SQL implementation of LeetCode (181. Employees earn more than managers)

[LeetCode] 181.Employees Earning More Than Their ...

How to batch generate MySQL non-duplicate mobile phone number table example code

Preface In many MySQL test scenarios, some test d...

Use a table to adjust the format of the form controls to make them look better

Because I want to write a web page myself, I am al...

Understanding Vuex in one article

Table of contents Overview Vuex four major object...

Simple example of limit parameter of mysql paging

Two parameters of Mysql paging select * from user...

How InnoDB cleverly implements transaction isolation levels

Preface In the previous article Detailed Explanat...