CSS implements three column layout (the Holy Grail and double flying wing layout can be realized by advanced)

 

catalogue

1. Floating + positioning (not conforming to the definition of three column layout, but similar to three column layout)

2. Floating + adjusting outer margin + relative positioning

  3. On the basis of the same principle as part 2, the double flying wing layout can be realized with slight modification.

Three column layout can be implemented in many ways

1. Floating + positioning (not conforming to the definition of three column layout, but similar to three column layout)

The effect is shown in the figure

  The code is as follows

<!DOCTYPE html>
<html lang="zn-ch">
<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>Test 1</title>
  <style>
    .left{
      float:left;
      width:25%;
      height:700px;
      background-color: yellow;
    }
    .right{
      float:right;
      width:25%;
      height:700px;
      background-color: tomato;
    }
    .middle{
      width:50%;
      height:700px;
      position:absolute;
      left:25%;
      background-color: orange;
    }
    .sanlan{
      position: relative;
    }
  </style>
</head>
<body>
<div class="sanlan">
<div class="right"></div>
<div class="left"></div>
<div class="middle"></div>
</div>
</body>
</html>

Implementation idea: floating can make the left and right columns reach the specified position. The left column sets the left float and the right column sets the right float. Because the floating box will avoid the regular flow box and the regular flow box will not avoid the floating box, when writing the html code of the box, put the box in the middle column at the end. Due to the floating relationship, the middle bar will be blocked by the left bar. At this time, you only need to set the absolute positioning to pull the middle bar back.

Three column layout definition: fixed width on both sides and adaptive width in the middle.

  Considering the definition problem, this implementation is not correct.

2. Floating + adjusting outer margin + relative positioning

The effect is slightly different, and the requirements of fixed width on both sides and adaptive width in the middle are indeed realized.

The code is as follows

<!DOCTYPE html>
<html lang="zn-ch">
<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>Test 1</title>
  <style>
    .left{
      width:200px;
     height:500px;
     background-color: aqua;
     float: left;
     margin-left: -100%;
     position: relative;
     left: -200px;
    }
    .right{
      width: 200px;
      height:500px;
      background-color: brown;
      float: left;
      margin-right: -200px;
    }
    .middle{
      width: 100%;
      height:500px;
      background-color: black;
      float: left;
     
    }
    .sanlan{
      margin: 0 200px;
     
      
    }
    .clearfix::after{
      content: "";
      display: block;
      clear:both;
    }
  </style>
</head>
<body>
<div class="sanlan clearfix">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>

</div>
</body>
</html>

Implementation ideas:

1. Set 4 boxes, one box as the largest box, covering the middle, left, right and three boxes. The basic content of CSS is width, height and background color. The background color allows the effect to be clearly observed. Width is the key: the left and right columns are required to have a fixed width, and the middle column should be set to 100% to achieve the full effect. The temporary effects are as follows:

  div occupies a row alone, and the middle column is full of width. The left column and the right column can only be arranged below.

2. Set all three to float left. The temporary effects are as follows

  Since the middle box occupies the full width, the left and right columns can only float below.

3. Set the left and right outer margins of the largest box to accommodate the width of the left and right columns respectively (this will reserve space for the left and right columns, which will be used later). The effects are as follows:

  4. Set the left outer margin of the left column to a negative value. At this time, the outer margin is negative, and the left column is pulled to go with the middle column. When the outer margin of the left column is set to - 100%, the left column reaches the top right before it is not set. The right outer margin of the right column is set to a negative value of the right column width. So far, the left and right columns reach the left and right sides of the middle column respectively. The temporary effects are as follows:

  5. Set relative positioning in the left column and set its own width with negative left to reach the left side of the page. So far, the three column layout is completed.

 

To realize the Holy Grail layout, add header and footer to the existing foundation.

  3. On the basis of the same principle as part 2, the double flying wing layout can be realized with slight modification.

Differences 1. The middle column is set in a box. That is, one more box should be set to cover the contents of the middle column.

Differences 2. Relative positioning is no longer used to determine the position of the left and right columns, but the position of the left and right columns is set by the outer margin of the middle column

The codes are as follows:

<!DOCTYPE html>
<html lang="zh-cn">
<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>test</title>
    <style>
        .f,.h{
            width:100%;
            height:100px;
            background-color: chocolate;
        }
        .main{
            float: left;
            height: 300px;
            width:100%;
            background-color: chartreuse;
        }
        .left{
            width:120px;
            height: 300px;
            background-color: cyan;
            float: left;
            margin-left: -100%;
        }
        .right{
            width:200px;
            height: 300px;
            background-color: fuchsia;
            float: left;
            margin-left: -200px;
        }
        .center{
            background-color: gold;
            height:200px;
            width:auto;
            margin: 0 200px 0 120px;
        }
        .clearfix::after{
            content: "";
            display: block;
            clear:both;
        }
    </style>
</head>
<body>
    <header class="h"></header>
    <div class="san clearfix">
        <div class="main"><div class="center"></div></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer class="f"></footer>
</body>
</html>

  The specific effects are as follows:

Tags: Front-end css3 css

Posted on Sun, 05 Dec 2021 23:03:05 -0500 by tullmejs