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

CSS3 speeds up and delays transitions

1. Use the speed control function to control the ...

Postman data encryption and decryption to implement APP login interface simulation request

Table of contents Mainly used Postman functions D...

Detailed explanation of Vue's simple store

The simplest application of store in Vue is globa...

Introduction to MIME encoding (integrated from online information and practical experience)

1. MIME: Multipurpose Internet Mail Extensions Th...

Web design and production test questions and reference answers

<br />Web Design and Production Test Part I ...

JavaScript Basics Operators

Table of contents 1. Operators Summarize 1. Opera...

22 Vue optimization tips (project practical)

Table of contents Code Optimization Using key in ...

MySQL 5.7.19 (tar.gz) installation graphic tutorial under Linux

The first tutorial for installing MySQL-5.7.19 ve...

MySQL 5.7.20 Green Edition Installation Detailed Graphic Tutorial

First, let’s understand what MySQL is? MySQL is a...

W3C Tutorial (6): W3C CSS Activities

A style sheet describes how a document should be ...

Example code of javascript select all/unselect all operation in html

Copy code The code is as follows: <html> &l...

Detailed explanation of the loading rules of the require method in node.js

Loading rules of require method Prioritize loadin...

How to solve the high concurrency problem in MySQL database

Preface We all know that startups initially use m...

Solve the error problem caused by modifying mysql data_dir

Today, I set up a newly purchased Alibaba Cloud E...

Two ways to start Linux boot service

Table of contents rc.local method chkconfig metho...