Several methods of implementing two fixed columns and one adaptive column in CSS

Several methods of implementing two fixed columns and one adaptive column in CSS

This article introduces several methods of implementing two fixed columns and one adaptive column in CSS, and shares them with you. The details are as follows:

1.Flex layout

The Flexible Box Model, commonly referred to as flexbox, is a one-dimensional layout model. It provides powerful space distribution and alignment capabilities between flexbox child elements. We say that flexbox is a one-dimensional layout because a flexbox can only handle the layout of elements in one dimension at a time, a row or a column. Here we use flex layout to achieve two fixed columns and one adaptive column

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 

    #main{
         display: flex;/*Set as a flexible container*/
         }

    #left{ 
        width:200px;/*Fixed width on the left*/
        height:400px; 
        background:aqua;
    }
    #center{
         flex-grow:1; /*Fill the remaining space*/ 
         height:400px;  
         background:green;}
    #right{ 
        width:200px;/*Fixed right width*/
        height:400px;  
        background:blue;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

2. Use the floating method

Use float:left and float:right for the left and right parts respectively. Float makes the left and right elements out of the document flow, while the middle element is normally in the normal document flow. Use margin to specify the left and right margins for positioning in the middle document flow.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    *{margin: 0;padding: 0;}
    #main{
         width: 100%;height: 400px;
         }
    #left{ 
        width:200px;/*Fixed width on the left*/
        height:400px;
        float: left; /*Set the container to float left*/
        background:aqua;
    }
    #center{
         width: 100%;
         height:400px;
         margin: 0 200px;/*Set the left and right margins of the container*/ 
         background:green;}
    #right{ 
        width:200px;/*Fixed right width*/
        height:400px;  
        float: right;/*Set the container to float right*/
        background:blue;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="right"></div>
        <div id="center"></div>
    </div>
</body>
</html>

3. Use float plus calc function

Use float:left for the three parts, then fix the width on the left and right sides, and use the calc function to calculate the width in the middle.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    *{margin: 0;padding: 0;}
    #main{
         width: 100%;height: 400px;
         }
    #left{ 
        width:200px;/*Fixed width on the left*/
        height:400px;
        float: left; /*Set the container to float left*/
        background:aqua;
    }
    #center{
         width: calc(100% - 400px);/*Set the middle width to the parent container width minus 400px*/
         height:400px;
         float: left;/*Set the container to float left*/ 
         background:green;}
    #right{ 
        width:200px;/*Fixed right width*/
        height:400px;  
        float:left;/*Set the container to float left*/
        background:blue;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

4. Use absolute positioning

Use absolute positioning to fix the left and right parts at both ends, and use margin to specify the left and right margins for positioning in the middle document flow.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    *{margin: 0;padding: 0;}
    #main{
         width: 100%;
         height: 400px;
         position: relative;/*Parent container uses relative positioning*/
         }
    #left{ 
        width:200px;/*Fixed width on the left*/
        height:400px;
        position: absolute;/*Use fixed positioning on the left*/
        left: 0;/*positioned at the far left of the container*/
        top: 0;
        background:aqua;
    }
    #center{
         width:100%;
         height:400px;
         margin: 0 200px;/*Set the left and right margins of the middle container*/
         background:green;}
    #right{ 
        width:200px;/*Fixed right width*/
        height:400px;
        position: absolute;/*Fixed positioning on the right*/
        right: 0;/*positioned at the rightmost side of the container*/
        top: 0;
        background:blue;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

The effect diagram is as follows:

This concludes this article about several methods of implementing two fixed columns and one adaptive column with CSS. For more relevant content about two fixed columns and one adaptive column with CSS, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Introduction to the use of form OnSubmit and input type=image

>>:  Detailed explanation of JavaScript timers

Recommend

What to do if you forget your Linux/Mac MySQL password

What to do if you forget your Linux/Mac MySQL pas...

Convert XHTML CSS pages to printer pages

In the past, creating a printer-friendly version ...

How to monitor array changes in Vue

Table of contents Preface Source code Where do I ...

Share 5 JS high-order functions

Table of contents 1. Introduction 2. Recursion 3....

React Fragment Introduction and Detailed Usage

Table of contents Preface Motivation for Fragment...

Solve the problem of MySql8.0 checking transaction isolation level error

Table of contents MySql8.0 View transaction isola...

A troubleshooting experience of centos Docker bridge mode unable to access the host Redis service

background: I have done a project before, which r...

Implementation example of Docker rocketmq deployment

Table of contents Preparation Deployment process ...

JavaScript implements the generation of 4-digit random verification code

This article example shares the specific code for...

15 JavaScript functions worth collecting

Table of contents 1. Reverse the numbers 2. Get t...

Detailed explanation of js event delegation

1. Each function is an object and occupies memory...

Nginx reverse proxy forwards port 80 requests to 8080

Let's first understand a wave of concepts, wh...

MySQL incremental backup and breakpoint recovery script example

Introduction Incremental backup means that after ...

A brief discussion on the principle of js QR code scanning login

Table of contents The essence of QR code login Un...

Web Design: When the Title Cannot Be Displayed Completely

<br />I just saw the newly revamped ChinaUI....