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

Detailed explanation of the default values of width and height in CSS: auto and %

Detailed explanation of 5 solutions for CSS intermediate adaptive layout

Detailed explanation of the default values of width and height in CSS: auto and %

Detailed tutorial on configuring local yum source in CentOS8

Cross-domain issues in front-end and back-end separation of Vue+SpringBoot

How to dynamically add a volume to a running Docker container

Troubleshooting MySQL high CPU load issues

JavaScript implements the nine-grid click color change effect

img usemap attribute China map link

CSS3 uses scale() and rotate() to achieve zooming and rotation

Tutorial on using portainer to connect to remote docker

mysql5.7.14 decompression version installation and configuration method graphic tutorial (win10)

Recommend

How to check and organize website files using Dreamweaver8

How to use JS to check if an element is within the viewport

If I change a property randomly in Vue data, will the view be updated?

Use js in html to get the local system time

Detailed explanation of new relational database features in MySQL 8.0

Quickly obtain database connection information and some extensions through zabbix

Summary of various methods for JS data type detection

Control the vertical center of the text in the HTML text box through CSS

Detailed process of upgrading gcc (version 10.2.0) under CentOS7 environment

Vue based on Element button permission implementation solution

Example code for using text-align and margin: 0 auto to center in CSS

Detailed explanation of the implementation process of Nginx log timing splitting in CentOS 7

Introduction to Royal Blue Color Matching for Web Design

Example code of vue icon selector

Tutorial on installing MYSQL5.7 from OEL7.6 source code