The wings and grail layout are old stories, but I recently reviewed them and wrote them down for future reference, as well as to deepen my understanding. If there is something wrong, I hope you can give me some advice.

Double wing layout

The.center is in front because you want to render the content in advance

    <header>head</header>
    <section class="clear">
      <div class="center">
        <div class="content"></div>
      </div>
      <div class="first"></div>
      <div class="second"></div>
    </section>
    <footer>footer</footer>
Copy the code

      section {
        min-width: 800px;
      }
      .center,
      .first,
      .second {
        float: left;
        height: 50vh;
      }
      .center {
        width: 100%;
        background: lightblue;
      }
      .center .content {
        margin: 0 100px;
      }
      .first {
        width: 100px;
        margin-left: -100%;
        background: lightcoral;
      }
      .second {
        width: 100px;
        background: lightgoldenrodyellow;
        margin-left: -100px;
      }
Copy the code

We all know that divs belong to block-level elements and have their own row. If you want all three elements to appear on one line, float them out of the document flow. Center left width for left and right elements, because the width has been set to 100% so the left and right elements are pushed to the next row. First set marginLeft:100% means move the entire screen to the left, so that it fits within the 100px width reserved for the left. Second marginRight:100px Move your own width to the left and put it in the reserved space on the right, so you have an adaptive three-column layout with fixed width in the middle

The holy grail layout

<header>head</header> <! - the holy grail - > < main class = "clear" > < div class = "middle" > < / div > < div class = "left" > < / div > < div class = "right" > < / div > < / main > <footer>footer</footer>Copy the code

    main {
        min-width: 600px;
        padding: 0 100px;
    }
    .left,
    .middle,
    .right {
        float: left;
        height: 40vh;
    }
    .middle {
        background: orange;
        width: 100%;
    }
    .left {
        background: purple;
        width: 100px;
        margin-left: -100%;
        position: relative;
        left: -100px;
    }
    .right {
        position: relative;
        background: #000;
        width: 100px;
        margin-left: -100px;
        left: 100px;
    }
Copy the code

The difference is that the outer layer is set to padding:100px, and the middle is only 100VW-200px wide. The same as the wings is that the left and right are moved to the same line as the middle using negative margin. The difference is that you also need to set the relative positioning, and use the padding of the main element of the positioning left property to achieve a fixed-width, middle-adaptive three-column layout.

Flex layout

The Flex layout can be implemented as well, where the left and right widths are fixed, and the middle element flex:1 takes up the rest of the width, so no code is posted here.