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

IIS7~IIS8.5 delete or modify the server protocol header Server

Requirements: Remove HTTP response headers in IIS...

14 techniques for high-performance websites

Original : http://developer.yahoo.com/performance...

DockerToolBox file mounting implementation code

When using docker, you may find that the file can...

Recommend 60 paging cases and good practices

<br />Structure and hierarchy reduce complex...

Summarize some general principles of web design and production

<br />Related articles: 9 practical suggesti...

A brief discussion on how to cancel requests and prevent duplicate requests in axios

Table of contents Preface Core - CancelToken Prac...

js to realize a simple disc clock

This article shares the specific code of js to im...

Nginx signal control

Introduction to Nginx Nginx is a high-performance...

A brief discussion on when MySQL uses internal temporary tables

union execution For ease of analysis, use the fol...

How to configure SSL for koa2 service

I. Introduction 1: SSL Certificate My domain name...

MySQL encryption and decryption examples

MySQL encryption and decryption examples Data enc...

Sharing tips on using Frameset to center the widescreen

Copy code The code is as follows: <frameset co...

Django+mysql configuration and simple operation database example code

Step 1: Download the mysql driver cmd enters the ...

MySQL Oracle and SQL Server paging query example analysis

Recently, I have done a simple study on the data ...

mysql solves time zone related problems

Preface: When using MySQL, you may encounter time...