Home >Web Front-end >CSS Tutorial >How to implement the classic three-column layout of CSS

How to implement the classic three-column layout of CSS

php中世界最好的语言Original: 2018-01-30 10:00:111634browse

This time I will show you how to implement the classic three-column layout of CSS. What are the precautions for implementing the classic three-column layout of CSS? The following is a practical case, let’s take a look.

This article introduces the classic CSS three-column layout scheme, share it with everyone, and make a note for yourself. The details are as follows:

Three-column layout, as the name suggests, is fixed on both sides and adaptive in the middle. Three-column layout is very common in development

1. Float layout

The simplest three-column layout is to use float for layout. First, let’s draw the left and right columns:

<style>
  .left {
    float: left;
    width: 100px;
    height: 200px;
    background-color: red;
  }
 
  .right {
    float: right;
    width: 100px;
    height: 200px;
    background-color: yellow;
  }
</style>
   
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>

Next, let’s look at how to deal with the middle column. We know that for float elements, they will break away from the document flow, and other boxes will ignore this element. (But the text in other boxes will still make room for this element and surround it.) So at this time, you only need to add a normal div in the container container, which will ignore the left and right and fill the entire container. Just In addition, the margin is left right and the space flows out:

<style>
   .left {
     float: left;
     width: 100px;
     height: 200px;
     background-color: red;
   }
  
   .right {
     float: right;
     width: 100px;
     height: 200px;
     background-color: yellow;
   }
  
   .main {
     background-color: green;
     height: 200px;
     margin-left: 120px;
     margin-right: 120px;
   }
  
   .container {
     border: 1px solid black;
   }
  
   <div class="container">
   <div class="left"></div>
   <div class="right"></div>
   <div class="main"></div>
   </div>

Advantages: Simple

Disadvantages: The middle part is loaded last, which affects the experience when there is a lot of content

2. BFC rules

BFC (Block Formatting Context) rules stipulate that BFC will not overlap floating elements. So if you set the main element as a BFC element:

<style>
  .left {
    float: left;
    width: 100px;
    height: 200px;
    background-color: red;
  }
 
  .right {
    float: right;
    width: 100px;
    height: 200px;
    background-color: yellow;
  }
 
  .main {
    background-color: green;
    height: 200px;
    overflow: hidden;
  }
 
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>

3. Holy Grail Layout

The core of the Holy Grail layout is that the left, middle, and right columns are all floated through float, and then passed Negative margins are adjusted.

The first step is to take a look at the basic layout

<style>
    .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
    }
 
    .right {
        float: left;
        width: 100px;
        height: 200px;
        background-color: yellow;
    }
 
    .main {
        float: left;
        width: 100%;
        height: 200px;
        background-color: blue;
    }
</style>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

The effect you see at this time is: the left and right columns are squeezed into the second row. This is because main's width is 100%. Next, we adjust the margins of the left and right columns to put the left, middle, and right in one line:

.left {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100%;
    background-color: red;
}
 
.right {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100px;
    background-color: yellow;
}

The second step is to set the margin-left of left to -100%. At this time, the left The column will move to the beginning of the first row. Then set the margin-left of right to the negative value of its width: -100px, and the right column will also be moved to the same line as the left and middle columns:

But we are not done yet, let’s try Add some text to main:

<body>
    <div class="container">
        <div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

You can see that the text is suppressed, and we need to solve this problem next.

The third step is to give the container a padding. The padding should be exactly equal to the width of the left and right columns:

.container {
    padding-left: 100px;
    padding-right: 100px;
}

The results you see at this time are left, middle and right. The columns have shrunk as a whole, but the text is still suppressed.

The fourth step is to add relative layout to the left and right columns, and then move them outward by setting the left and right values:

.left {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100%;
    position: relative;
    left: -100px;
    background-color: red;
}
 
.right {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100px;
    position: relative;
    right: -100px;
    background-color: yellow;
}

So far, you’re done:

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to implement the classic three-column layout of CSS

Related articles