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

Sample code of uniapp vue and nvue carousel components

The vue part is as follows: <template> <...

Detailed tutorial on installing mysql 5.7.26 on centOS7.4

MariaDB is installed by default in CentOS, which ...

MySQL database green version installation tutorial to solve system error 1067

What is the difference between the green version ...

Linux kernel device driver system call notes

/**************************** * System call******...

How to enhance Linux and Unix server security

Network security is a very important topic, and t...

25 Tools to Improve Website Usability and Conversion Rates

For a website, usability refers to whether users c...

A quick solution to the error #1929 Incorrect datetime value: '''' for column ''createtime'' when using MySQL 5.x or above

After I installed MySQL, when I tried to save and...

Native JS realizes compound motion of various motions

This article shares with you a compound motion im...

How to implement the prototype pattern in JavaScript

Overview The prototype pattern refers to the type...

Native JS to implement sharing sidebar

This article shares a sharing sidebar implemented...

Vue3+script setup+ts+Vite+Volar project

Table of contents Create a vue + ts project using...

Detailed explanation of the use and underlying principles of MySQL table partitions

Table of contents What is a partition table Parti...

Solve the problem of MySQL Threads_running surge and slow query

Table of contents background Problem Description ...

Detailed explanation of various ways to merge javascript objects

Table of contents Various ways to merge objects (...

js uses FileReader to read local files or blobs

Table of contents FileReader reads local files or...