Summary and Comparison of CSS Mainstream Layouts (3) Two-column Layout

Posted on Edited on In Waline:

This time we continue to summarize the way and principle of the two-column layout in the mainstream layout of CSS.

First, let’s talk about what a two-column layout is.

The two-column layout generally specifies the width and Self-Adaptation layout. The left column of the two columns determines the width, and the right column is a layout effect that automatically fills all the remaining space.

float

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
< html long = "and" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left, .right {
            height: 300px;
        }
        .left {
            width: 300px;
            background-color: red;
            float: left;
        }
        .right {
            background-color: aliceblue;
            margin-left: 300px;
        }
    </style>
</head>
<body>
    <div class="parent">
        < div class = "left" > left: fixed width </div >
        < div class = "right" > right, Self-Adaptation </div >
    </div>
</body>
</html>

Principle

float

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and internal connection elements to wrap around it. The element is removed from the normal flow of web pages (doc flow), although still partially liquid (as opposed to绝对定位On the contrary).

** Floating element ** Yes

Since float implies using block layout, it modifies [‘display’] in some cases (https://developer.mozilla.org/zh-CN/docs/Web/CSS/display)

What will be modified specifically can be referred to: https://developer.mozilla.org/zh-CN/docs/Web/CSS/float

Advantages

Implementation is simple

Disadvantage

The self-adaptation margin must be the same as the width of the fixed-width element.

Floating fixed-width elements and not floating Self-Adaptation elements can cause display problems in older browsers.

Display problems can occur when child elements in floating elements use clear to clear the float.

Improve

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
< html long = "and" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left, .right {
            height: 300px;
        }
        .left {
            width: 300px;
            background-color: red;
            float: left;
            /* This is to raise the level of left, otherwise rigth-fix will override left */
            position: relative;
        }
        .right-fix {
            float:right;
            width: 100%;
            margin-left: -300px;
            background-color: pink;
        }
        .right {
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        < div class = "left" > left: fixed width </div >
        <div class="right-fix">
            < div class = "right" > right, Self-Adaptation </div >
        </div>
    </div>
</body>
</html>

The improved version can solve the second and third shortcomings

float

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
< html long = "and" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left, .right {
            height: 300px;
        }
        .left {
            width: 300px;
            background-color: red;
            float: left;
        }
        .right {
            /* In order to enable BFC mode */
            overflow: hidden;
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        < div class = "left" > left: fixed width </div >
        < div class = "right" > right, Self-Adaptation </div >
    </div>
</body>
</html>

Principle

overflow

The CSS property overflow is defined when the content of an element is too large to fit 块级格式化上下文 Time to do. It is overflow-x Andoverflow-yOf 简写属性 。

This option includes cutting, displaying scrollbars, or displaying content that spills out of the container into the surrounding area.

Specifying a value other than visible (the default) will create a new 块级格式化上下文This is technically necessary - if a floating element intersects the scrollbar, it will forcibly repackage the content after each scroll step, resulting in a slow scrolling experience.

For’overflow ‘to be effective, the block-level container must have a specified height (’ height ‘or’max-height’) or set’white-space ‘to’nowrap’.

Advantages

None of the problems in the first plan

Disadvantage

The overflow attribute not only enables BFC mode, but also sets the out of memory condition

display：table

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
< html long = "and" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            display: table;
            table-layout: fixed;
            width: 100%;
        }
        .left, .right {
            display: table-cell;
            height: 300px;
        }
        .left {
            width: 300px;
            background-color: red;
        }
        .right {
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        < div class = "left" > left: fixed width </div >
        < div class = "right" > right, Self-Adaptation </div >
    </div>
</body>
</html>

Principle

display：table

These elements behave like HTML table elements. It defines a block-level box.

table-layout

The table-layout CSS property defines the algorithm used to layout the table cells, rows, and columns.

Most browsers use automatic table layout algorithms to layout tables. The width of tables and cells depends on the content they contain.

  • fixed

The width of the table and columns is set by the width of the table, and the width of a column is only determined by the cell in the first row of the column. In the current column, the row after the row where the cell is located does not affect the entire column width.

When using “fixed” layout mode, the entire table can be parsed and rendered after the first row is downloaded. This can speed up rendering for “automatic” automatic layout mode, but the contents of subsequent cells will not Self-Adaptation the current column width. Any cell containing overflow content can use overflow Property controls whether out of memory is allowed.

Advantages

Good compatibility

Disadvantage

Will be subject to table constraints