Home > Web Front-end > CSS Tutorial > How to implement two column layout in css

How to implement two column layout in css

青灯夜游
Release: 2023-01-07 11:45:06
Original
6126 people have browsed it

Method: 1. Set "dislpay:inline-block" on both box elements; 2. Set both box elements to float; 3. The left fixed-width element is floated, and the right element is set to margin-left. And the value is greater than the width of the fixed-width element; 4. Floating BFC; 5. Absolute positioning margin-left, etc.

How to implement two column layout in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. What is a two-column layout?

There are two types of two-column layouts. One is fixed width on the left and adaptive on the right. One is that both columns are adaptive (that is, the left width is determined by the child elements, and the right side fills in the remaining space). CSS interview questions are common test questions and are also skills that a front-end development engineer must master. The implementation methods will be introduced below.

2. How to achieve fixed width on the left side and adaptive adjustment on the right side?

1. Double inline-block

Principle: Set dislpay:inline-block on both elements. To eliminate the influence of HTML spaces, the font-size of the parent element needs to be set to 0, and the width of the adaptive element on the right is calculated using the calc function. If the heights of the two elements are different, you can set vertical-align:top adjustment for the elements.

Disadvantages: Since the font-size of the parent element is set to 0, the text in the child element will not be displayed

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           *{
               padding: 0;
               margin: 0;
           }
            .box{
                height: 600px;
                width: 100%;
                font-size:0;
            }
            .left{
                display: inline-block;
                width: 100px;
                height: 200px;
                background-color: red;
                vertical-align: top;
                 
            }
            .right{
                display: inline-block;
                width: calc(100% - 100px);
                height: 400px;
                background-color: blue;
                vertical-align: top;
            }
             
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">
                <span>1234</span>
            </div>
            <div class="right">
                <span>1234</span>
            </div>
        </div>
    </body>
</html>
Copy after login

2. Double float

Principle: Two elements are set to float, and the width of the adaptive element on the right is calculated using the calc function

Disadvantages: Parent Elements need to be cleared from floating

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
 
            }
            .left{
                float: left;
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                float: left;
                width: calc(100% - 100px);
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">
                <span>
                    123adadadddddddddddddddddddddddddddddddddddddddd
                </span>
            </div>
            <div class="right"></div>
        </div>
    </body>
</html>
Copy after login

3. Floating margin

## Principle: Fixed-width elements on the left are floating, and elements on the right are floating The adaptive element can set the margin-left value to be greater than the width of the fixed-width element

Disadvantages: The parent element needs to clear the float

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
 
            }
            .left{
                float: left;
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                margin-left: 100px;
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">
                <p>1234</p>
            </div>
            <div class="right">
                <p>1234</p>
            </div>
        </div>
    </body>
</html>
Copy after login

4. Floating BFC

Principle: The parent element sets overflow:hidden, the left fixed-width element floats, and the right adaptive element sets overflow:auto to create BFC

Disadvantages: If the content of the left element exceeds the set width, it will overlap the right element

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
                overflow: hidden;
            }
            .left{
                float: left;
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                overflow: auto;
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left">111111111111111111111111</div>
            <div class="right">111111111111111111111111111111111111111111111</div>
        </div>
        <div class="right"></div>
    </body>
</html>
Copy after login

5.absolute margin- left

Principle: The parent element is positioned relatively, the left element is positioned absolutely, and the right adaptive element sets the margin-left value to be greater than the width of the fixed-width element

Disadvantages: The parent element is set to relative positioning

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
                position: relative;
            }
            .left{
                position: absolute;
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                margin-left: 100px;
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>
Copy after login

6.flex layout

Principle: The parent element sets display: flex, and the adaptive element sets flex: 1

Disadvantages: There are compatibility issues, and it is not supported below IE10

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                height: 600px;
                width: 100%;
                display: flex;
            }
            .left{
                width: 100px;
                height: 200px;
                background-color: red;
            }
            .right{
                flex: 1;
                height: 400px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>
</html>
Copy after login

3. The elements on the left and right sides are both adaptive

Strictly speaking, it does not mean that both elements are adaptive, it is just that the fixed width above is changed to be stretched by the child elements

1. Floating BFC

The principle is the same as above, except that the width of the left element is not set and is supported by the child elements

2.table layout

Principle: The parent element is display:table, and the left element is wrapped with a div. The div is set to display:table-cell, width :0.1% (guaranteed minimum width), margin-right is set internally on the left element, and display:table-cell is set on the right element.

Disadvantages: IE7 and below do not support it. When display:table is used, padding is invalid. The line-height attribute of the parent element is invalid. When display:table-cell is used, margin is invalid.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .parent{
                display: table;
                width: 100%;
                 
            }
            .box{
                display: table-cell;
                width: 0.1%;
            }
            .left{
                margin-right: 20px;
                background-color: red;
                height: 200px;
            }   
            .right{
                display: table-cell;
                background-color: blue;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="box">
                <div class="left">126545453dddddddd453453453</div>
            </div>
            <div class="right">12121</div>
        </div>
    </body>
</html>
Copy after login

3.flex layout

The principle and shortcomings are the same as the flex layout above

4.grid layout

## Principle: The parent element sets display: grid, grid-template-columns:auto 1fr; (This attribute defines the column width, auto The keyword indicates that the length is determined by the browser itself. fr is a relative size unit, indicating that the remaining space is equally divided) grid-gap: 20px (line spacing)

Disadvantages: too compatibility Poor, IE11 does not support it, only Google 57 and above can

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .parent{
                display:grid;
                grid-template-columns:auto 1fr;
                grid-gap:20px
            } 
            .left{
                background-color: red;
                height: 200px;
            }
            .right{
                height:300px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="left">1111111111111111111111111</div>
            <div class="right"></div>
        </div>
    </body>
</html>
Copy after login
(Learning video sharing: css video tutorial

)

The above is the detailed content of How to implement two column layout in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template