Detailed explanation of 5 solutions for CSS intermediate adaptive layout

Detailed explanation of 5 solutions for CSS intermediate adaptive layout

Preface

When making a page, we often encounter content related to page layout, and we are often asked about it during interviews. So today I will summarize the content about page layout.

Question: How to implement a three-column layout (fixed height, left-center-right structure)

Assuming the height is known, please write a three-column layout with the left and right widths both being 300px and the middle being adaptive.

After reading the above topic, experienced people may find it very simple. Think about it carefully, if we were to write it, how many solutions could we come up with? Generally, there are two types that come to mind, float and position positioning. In fact, in addition to these two, there are 3 more types that can be written. Let me introduce them one by one:

Solution 1 (float)

<section class='layout float'>
         <style>
             .layout.float .left-right-center{
                 height: 100px;
             }
             .layout.float .left{
                 float: left;
                 width: 300px;
                 background-color: red;
             }

             .layout.float .right{
                 float: right;
                 width: 300px;
                 background-color: blue;
             }

             .layout.float .center{
                 background-color: yellow;
             }
         </style>
         <article class="left-right-center">
             <div class="left"></div>
             <div class="right"></div>
             <div class="center">I am the adaptive element in the middle--floating</div>
         </article>
     </section>
  • Principle: Since the two divs on the left and right float out of the document flow, the center will move up, resulting in a three-column layout effect (provided that the heights are the same)
  • Advantages: High compatibility
  • Disadvantages: Need to clear float to prevent affecting other elements
  • If the height is not fixed, the content in the middle will be stretched, and the left and right sides will not be stretched together.

Solution 2 (absolute positioning)

<section class="layout absolute">
         <style>
             .layout.absolute .left-center-right div{
                 position: absolute;
                 height: 100px;
             }

             .layout.absolute .left{
                 left: 0;
                 width: 300px;
                 background-color: red;
             }

             .layout.absolute .center{
                 left: 300px;
                 right: 300px;
                 background-color: yellow;
             }

             .layout.absolute .right{
                 right: 0;
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                I am the adaptive element in the middle - absolute positioning</div>
            <div class="right"></div>
         </article>
     </section>
  • Principle: Use absolute positioning and width to fix the divs on the left and right, and the width of the middle div will have an adaptive effect
  • Advantages: Fast
  • Disadvantages: If the parent element is out of the document flow, the child element will definitely be out of the document flow, so there are not many scenarios where it can be used.
  • If the height of the middle element increases, the height of the elements on both sides will not increase, so only the middle div will expand

Solution 3 (flex layout)

<section class="layout flex">
         <style>
             .layout.flex .left-center-right{
                 display: flex;
                 height: 100px;
             }

             .layout.flex .left{
                 width: 300px;
                 background-color: red;
             }

             .layout.flex .center{
                 flex: 1;
                 background-color: yellow;
             }

             .layout.flex .right{
                 width: 300px;
                 background-color: blue;
             }
         </style>
         <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                I am the adaptive element in the middle - flex layout</div>
            <div class="right"></div>
         </article>
     </section>
  • Principle: Set the parent element to flex layout, and then set the flex of the middle element to 1 to achieve the adaptive effect
  • Advantages: Commonly used in actual development
  • Disadvantages: IE8 and below browsers do not support
  • If the height is not fixed, the height of the content in the middle will expand, and the two sides will also expand accordingly.

Solution 4 (table layout)

   <section class="layout table">
        <style>
            .layout.table .left-center-right{
                display: table;
                height: 100px;
                width: 100%;
            }

            .layout.table .left{
                display: table-cell;
                width: 300px;
                background-color: red;
            }

            .layout.table .center{
                display: table-cell;
                background-color: yellow;
            }

            .layout.table .right{
                display: table-cell;
                width: 300px;
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                I am the adaptive element in the middle - table
            </div>
            <div class="right"></div>
        </article>
    </section>
  • Principle: Set the parent element to table layout, then each child element is teble-cell, set a fixed width for the left and right grids, and the middle grid can achieve adaptive effect
  • Advantages: good compatibility, can be used as a substitute for flex layout in IE8 and below
  • Disadvantages: Limitations
  • If the height is not fixed, when the middle is stretched, the left and right sides will also be stretched, similar to flex

Option 5 (Grid Layout)

<section class="layout grid">
        <style>
            .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                grid-template-rows: 100px;/*Each grid is 100px high*/
                grid-template-columns: 300px auto 300px;/*The left and right grids are both 300px, and the middle one is adaptive*/
            }
            
            .layout.grid .left{
                background-color: red;
            }

            .layout.grid .center{
                background-color: yellow;
            }

            .layout.grid .right{
                background-color: blue;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                I am the adaptive element in the middle - grid layout</div>
            <div class="right"></div>
        </article>
    </section>
  • Principle: Set the parent element to a grid layout, then specify the height and width of each grid, and then set the color of each grid separately.
  • Advantages: relatively new technology, convenient
  • Disadvantages: compatibility is not very good
  • If the height is not fixed, adding text to the middle element will not expand

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  Vue.js implements simple folding panel

>>:  Detailed explanation of MySQL Group by optimization

Recommend

Oracle VM VirtualBox installation of CentOS7 operating system tutorial diagram

Table of contents Installation Steps Environment ...

Detailed explanation of using Docker to quickly deploy the ELK environment (latest version 5.5.1)

After installing Docker on the Linux server, Pull...

10 reasons why Linux is becoming more and more popular

Linux has been loved by more and more users. Why ...

When catalina.bat is set to UTF-8 in Tomcat, garbled characters appear on the console

1. The catalina.bat must be set to UTF-8. If I do...

Some findings and thoughts about iframe

This story starts with an unexpected discovery tod...

Solution to the docker command exception "permission denied"

In Linux system, newly install docker and enter t...

Detailed explanation of how to modify the style of el-select: popper-append-to-body and popper-class

How to modify the style of the el-select componen...

MySQL 8.0.12 Installation and Usage Tutorial

Recorded the installation and use tutorial of MyS...

Detailed explanation of Linux command unzip

Table of contents 1. unzip command 1.1 Syntax 1.2...

Pull-down refresh and pull-up loading components based on Vue encapsulation

Based on Vue and native javascript encapsulation,...

Summary of common tool functions necessary for front-end development

1. Time formatting and other methods It is recomm...

Detailed explanation of MySQL backup and recovery practice of mysqlbackup

1. Introduction to mysqlbackup mysqlbackup is the...

Example code for implementing WeChat account splitting with Nodejs

The company's business scenario requires the ...

How to implement one-click deployment of nfs in linux

Server Information Management server: m01 172.16....

A brief discussion on JavaScript shallow copy and deep copy

Table of contents 1. Direct assignment 2. Shallow...