This is the 4th day of my participation in the August Better Writing Challenge

(Basic knowledge is often 4: Holy Grail layout) I was busy with my work yesterday, so I did not update the document in time. I sent it late at night. What is called the Grail layout, MY feeling may be to make the effect is very similar to the Grail probably!

Effect :(fixed on both sides, middle varies with browser size)

HTML: public part

<! -- float -->
    <div class="box1">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <! Flex -->
    <div class="box2">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <! Margin -->
    <div class="box3">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
Copy the code

Method 1 :(use float layout)

.box1{// The parent element is positioned relativeposition: relative;
            padding: 0 200px;
        }
        
        .box1 .left{// The child elements are positioned relativeposition: absolute;
            top: 0;
            left: 0; // The box on the left floats leftfloat: left;
            height: 200px;
            width: 200px;
            background-color: pink;
        }
        
        .box1 .right {
            position: absolute;
            top: 0;
            right: 0; // The box on the right floats rightfloat: right;
            height: 200px;
            width: 200px;
            background-color: hotpink;
        }
        
        .box1 .center{// Middle box ADAPTS100%
            width: 100%;
            height: 200px;
            background-color: yellow;
        }
Copy the code

Method 2 :(using flex layout)

.box2 {
            display: flex;
            margin-top: 100px;
        }
        
        .box2 .left {
            height: 200px;
            width: 200px;
            background-color: pink;
        }
        
        .box2 .right {
            height: 200px;
            width: 200px;
            background-color: hotpink;
        }
        
        .box2 .center{/ / useflexLayout middle FLEX1flex: 1;
            width: 100%;
            height: 200px;
            background-color: yellow;
        }
Copy the code
   .box3 {
            position: relative;
            margin-top: 100px;
        }
        
        .box3 .left {
            position: absolute;
            top: 0;
            left: 0;
            height: 200px;
            width: 200px;
            background-color: pink;
        }
        
        .box3 .right {
            position: absolute;
            top: 0;
            right: 0;
            height: 200px;
            width: 200px;
            background-color: hotpink;
        }
        
        .box3 .center {
            margin: 0 200px; // It should be explained here, filewidthWhen not set, //marginThe left and right values will default to inwards/* width: 100%; * /
            height: 200px;
            background-color: yellow;
        }
Copy the code

To continue, there is a better way I will update in time, welcome to come to comment