How to implement the classic three-column layout of CSS-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to implement the classic three-column layout of CSS

php中世界最好的语言

Jan 30, 2018 am 10:00 AM

cssaccomplish

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!

In h5, the mobile page should be zoomed How to implement

How to use H5 Canvas to implement 3D dynamic Chart chart

How to use H5’s FileReader distribution to read files and its Method introduction

The above is the detailed content of How to implement the classic three-column layout of CSS. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Iterating a React Design with Styled ComponentsApr 21, 2025 am 11:29 AM

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!Apr 21, 2025 am 11:26 AM

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

SVG Properties in CSS GuideApr 21, 2025 am 11:21 AM

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

A Few Functional Uses for Intersection Observer to Know When an Element is in ViewApr 21, 2025 am 11:19 AM

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that

Revisting prefers-reduced-motionApr 21, 2025 am 11:18 AM

We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion.

How to Get a Progressive Web App into the Google Play StoreApr 21, 2025 am 11:10 AM

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be

The Simplest Ways to Handle HTML IncludesApr 21, 2025 am 11:09 AM

It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that