Two columns of the layout

Writing in the front

In addition to looking at graphics, pay attention to comments in your code

concept

The interface is divided into two columns, the left column is fixed width, the right column is adaptive

As shown in the figure below:

implementation

Version of a

The rationale: one block-level element floats and the other remains default, so that the second block-level element will appear on the same line as the first block-level element

Implement the effects and code

The implementation code

<! DOCTYPEhtml>
<html lang="en">
<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>Two columns of the layout</title>
    <style>
        .root{
            height:300px;
            width: 600px;
        }
        .left{
            float:left;
            background-color: pink;
            width:200px;
            height: 100%;
        }
        .right{
            height: 100%;
            background-color: gray;
            margin-left:200px;
        }
    </style>
</head>
<body>
    <! -- Big box set width and height -->
    <div class="root">
        <! -- Set the width of the box on the left and set the left float (the element is out of the document flow because the float is set) -->
        <div class="left"></div>
        <! The left box will float on the same line as the left box. The width of the div is 100% by default, so the width of the left box is 100%.
        <div class="right"></div>
    </div>
</body>
</html>
Copy the code

The implementation effect is as follows:

Advantages and Disadvantages

Advantages: Simple implementation

Bug: The contents of the right box may collapse out of the box if cleared float is set.

The detailed disadvantages are as follows:

Margin-width is coupled to left box width and right box width
Left and right boxes, one out of the document flow, one still in the document flow
Clearing the contents of the right box will cause them to collapse out of the box

Defect demonstration code

<! DOCTYPEhtml>
<html lang="en">
<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>Two columns of the layout</title>
    <style>
        .root{
            height:300px;
            width: 600px;
        }
        .left{
            float:left;
            background-color: pink;
            width:200px;
            height: 100%;
        }
        .right{
            height: 100%;
            background-color: gray;
            margin-left:200px;
        }
        .content{
            clear: both;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <! -- Big box set width and height -->
    <div class="root">
        <! -- Set the width of the left box and set the left float (the element is no longer in the document flow because the float is set) -->
        <div class="left"></div>
        <! The left box will float on the same line as the left box. The width of the div is 100% by default, and the width of the left box is 100% by default.
        <div class="right">
            <div class="content"></div>
        </div>
    </div>
</body>
</html>
Copy the code

Defect effect demonstration

Version 2

Rationale: Both boxes float so that children of the box use the clear property without affecting elements outside the box. Use the width of 100% – negative margin-left or margin-right, leaving enough space for other elements features, to achieve a two-column layout.

Implement the effects and code

The implementation code

<! DOCTYPEhtml>
<html lang="en">
<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>Two columns of the layout</title>
    <style>
        .root{
            height:300px;
            width: 600px;
        }
        .left{
            float:left;
            background-color: pink;
            width:200px;
            height: 100%;
            /* Since.right-fix floats the box and overwrites the element where. Left is located, position: relative must be set to show priority over
            position: relative;
        }
        .right-fix{
            height: 100%;
            background-color: orange;
            /* There is a float that takes the element out of the document flow */
            float:right;
            width: 100%;
            /* Note: the width is 100% and the right float is set, so the margin-left effect is actually 200px */ while keeping the position unchanged
            margin-left: -200px;
        }
        .right{
            height: 100%;
            background-color: lightgray;
            /* Note: you must also set margin-left, otherwise the content will be at the far left of the parent box */
            margin-left: 200px;
        }
        .content{
            /* Now the float is cleared and the node will not leak out */
            clear: both;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <! -- Big box set width and height -->
    <div class="root">
        <! -- Set the width of the left box and set the left float (the element is no longer in the document flow because the float is set) -->
        <div class="left"></div>
        <div class="right-fix">
            <div class="right">
                <div class="content">fff</div>
            </div>
        </div>
    </div>
</body>
</html>
Copy the code

Implementation effect

Advantages and Disadvantages

Advantages: Fixed a problem in version 1 that caused elements inside the right box to leak out of the box

Cons: CSS and HTML structures have become complex

The detailed disadvantages are as follows:

Margin-width is coupled to left box width and right box width

Version 3

Principle: Use display: table to display the table layout

Implement the effects and code

<! DOCTYPEhtml>
<html lang="en">
<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>Two columns of the layout</title>
    <style>
        .root{
            display: table;
            table-layout: fixed;
            height:300px;
            width: 900px;
        }
        .left..right{
            display: table-cell;
        }
        .left{
            width:300px;
            background-color: lightblue;
        }
        .right{
            background-color: lightcoral;
        }
        .content{
            background-color: lightgreen;
            width: 100px;
            height: 100px;
            clear: both;
        }
    </style>
</head>
<body>
    <! -- Big box set width and height -->
    <div class="root">
        <div class="left"></div>
        <div class="right">
            <div class="content">fff</div>
        </div>
    </div>
</body>
</html>
Copy the code

Advantages and Disadvantages

Advantages: simple implementation, good compatibility, some problems in version one and version two, version three have been solved

Error: Table layout emulates the table feature, directly using table layout problem, display=table also has the same problem

extension

Of the pageEach element is treated as a rectangular boxThe box consists of the element’s content, inner margin, border, and margin.
The CSS has three positioning mechanisms:Normal flow (also known as document flow).Floating positioning.Absolute positioning. All boxes are positioned in normal flow unless specified.
Relative positioningisNormal flowA type of positioning, because the position of an element is relative to its position in a normal flow.
Absolute positioning makes the position of an element independent of the document flow and does not take up space. The layout of other elements in a normal document flow also treats the absolute positioning element as if it did not exist. An absolutely located element is positioned relative to its nearest located ancestor element. If an absolutely positioned element has no positioned ancestor element, its position is relative to the root element.
Fixed positioning is a kind of absolute positioningThe difference is that the contained block of the fixed element is the viewport, so the position of the fixed element is always fixed on the page.
A floating element can move left and right until its outer edge touches the edge of the containing box or another floating box. The include box edge here refers to the edge of the parent element of the current element.
Floating the box takes it out of the normal flow (document flow) without affecting surrounding elementsBlock boxes in normal flow behave as if float boxes did not exist.
The clear property indicates which sides of the box should not be next to the float box, float box (used hereBox 1Represents) internal descendant box if carriedclearProperty Settings are not going to be rightBox 1Descendants of the box outside the box affects the box.

One final note

inA block element with a width of 100% and right floatSet in theMargin - left negativeThe actual effect isKeep the position the same and leave a space to the left

Writing in the front

concept

implementation

Version of a

Implement the effects and code

Advantages and Disadvantages

Defect demonstration code

Defect effect demonstration

Version 2

Implement the effects and code

Advantages and Disadvantages

Version 3

Implement the effects and code

Advantages and Disadvantages

extension

One final note

Related Posts

I’m calling you to learn JavaScript addition, subtraction, multiplication and division!

Vite dynamic import introduces a packaged error solution

The CSS positioning