Grail layout and twin wing layout

  • The main purpose of

    • Three-column layout with the middle column loaded and rendered first (middle content has higher priority)
    • The width of both sides is fixed, and the content in the middle ADAPTS to the width
    • Often used on PC pages

  • Key points of layout

    • usefloatlayout
    • On both sides of the usemarginNegative value to avoid horizontal overlap with the middle content
    • To prevent the middle content from being covered by both sides, the grail layout is usedpaddingFor use in the dual flying wing layoutmargin

The holy grail layout

  • The basic structure
<head>
    <style>
        .header,
        .footer {
          height: 50px;
          background-color: #cfcfcf;
          text-align: center;
        }
        .container .column {
          height: 50px;
        }
        .center {
          width: 100%;
          background-color: skyblue;
        }
        .left {
          width: 150px;
          background-color: #e44f26;
        }
        .right {
          width: 200px;
          background-color: green;
        }
    </style>
</head>
<body>
    <div class="header">header</div>
        <div class="container">
          <div class="center column">center</div>
          <div class="left column">left</div>
          <div class="right column">right</div>
        </div>
    <div class="footer">footer</div>
</body>
Copy the code

  • Put center first, you can render it first, and here is the content area.

  • Give the container elements the left and right margins, leave the sides white, and squeeze the contents to the center to avoid being overwritten. Set the padding-left to the width of the left box and the padding-right to the width of the right box

.container {
  min-width: 600px;
  padding-left: 150px;
  padding-right: 200px;
}
Copy the code

  • tocenter.left.rightThree boxes are set to float left
.center, .left, .right { float: left; } /* Clear float */. Clearfix :after {content: ""; display: block; clear: both; } .clearfix { *zoom: 1; }Copy the code
  • And set the cleanup float on their parent element.
<div class="container clearfix">
  <div class="center column">center</div>
  <div class="left column">left</div>
  <div class="right column">right</div>
</div>
Copy the code

  • Move the left box left to the left of Center

  • Set margin-left: -100% for the left box left. Drag the left to the width of the parent element so that the left box left overlaps the left side of the middle box center.

  • Left box left set position: relative and left: -150px; Move your width to the left relative to your current position.

    .left {
  width: 150px;
  background-color: #e44f26;
  margin-left: -100%;
  position: relative;
  left: -150px;
}
Copy the code

  • Move the right box right to the right of Center

  • Make use of the margin-right negative feature, set a negative value of its own width, and squeeze itself to make the browser think it is 0 width

    .right {
 width: 200px;
 background-color: green;
 margin-right: -200px;
}
Copy the code

  • The complete code is as follows:

Online sample

< span style>. Header,.footer {height: 50px; background-color: #cfcfcf; text-align: center; } .container { padding-left: 150px; padding-right: 200px; } .container .column { height: 50px; } .center { width: 100%; background-color: skyblue; } .left { width: 150px; background-color: #e44f26; margin-left: -100%; position: relative; left: -150px; } .right { width: 200px; background-color: green; margin-right: -200px; } .center, .left, .right { float: left; } /* Clear float */. Clearfix :after {content: ""; display: block; clear: both; } .clearfix { *zoom: 1; } </style> </head> <body> <div class="header">header</div> <div class="container clearfix"> <div class="center column">center</div> <div class="left column">left</div> <div class="right column">right</div> </div> <div class="footer">footer</div> </body> </html>Copy the code

Twin wing layout

  • The basic structure
</ style>. Container {min-width: 600px; } .column { height: 50px; } .center { width: 100%; background-color: skyblue; } .center .main { background-color: #fcd000; height: 100%; } .left { width: 200px; background-color: #e44f26; } .right { width: 150px; background-color: green; } </style> </head> <body> <div class="container"> <div class="center column"> <div class="main">main</div> </div> <div class="left column">left</div> <div class="right column">right</div> </div> </body>Copy the code

  • tocenter.left.rightSet left float
.column {
  height: 50px;
  float: left;
}
Copy the code

  • Left blank on both sides: here you aremainSet up theMargin-left: width of the left boxandMargin-right: width of the box on the rightTo avoid content being overwritten
.center .main {
  margin-left: 200px;
  margin-right: 150px;
}
Copy the code

  • Left box settingmargin-left: -100%, andcenterOverlap, right in the middlemainOn the left
.left {
  width: 200px;
  background-color: #e44f26;
  margin-left: -100%;
}
Copy the code

  • Right box settingMargin-left: negative right-sided box widthBe right in the middlemainOn the right
.right {
  width: 150px;
  background-color: green;
  margin-left: -150px;
}
Copy the code

  • The complete code is as follows:

Online sample

</ style>. Container {min-width: 600px; } .column { height: 50px; float: left; } .center { width: 100%; background-color: skyblue; } .left { width: 200px; background-color: #e44f26; margin-left: -100%; } .right { width: 150px; background-color: green; margin-left: -150px; } .center .main { margin-left: 200px; margin-right: 150px; } </style> </head> <body> <div class="container"> <div class="center column"> <div class="main">main</div> </div> <div class="left column">left</div> <div class="right column">right</div> </div> </body> </html>Copy the code