Summary of implementation methods of CSS three-column layout (code example)

This article brings you a summary of the implementation method of CSS three-column layout (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

For the front end, layout must also be mastered. A good layout can make the page look more beautiful. When it comes to layout, we have to talk about CSS three-column layout. This is a question often asked in front-end interviews, and it is considered a basic question. The so-called three-column layout generally refers to the left and right sides being fixed and the middle adaptive, or the middle being fixed and the left and right sides adaptive.

Fixed middle adaptive left and right sides

Holy Grail layout

HTML structure settings

Create a new parent element containing three child elements : left, main, right (note that main is written in front, so that the middle part will be loaded first when the page is rendered, and the middle part will be loaded first for interview questions)

style style setting

1. Set the height of the parent element
2. All three elements are set to float
3. The middle main part has a fixed width of 100%: width: 100%, and the width and height of the left and right sides are set according to product requirements
4. Set margin- on the left left: -100%; set margin-right on the right: -right box width
5. Parent element sets padding-left: left box width; padding-right: right box width
6. Relative positioning of left and right boxes

<div class="container">
  <div class="main f">go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
  <div class="left f"></div>
  <div class="right f"></div>
</div>
<style>
  body {
    min-width: 700px;
  }
  .container {
     height: 300px;
     padding: 0 200px 0 200px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
     position: relative;
     left: -200px;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
     position: relative;
     right: -200px;
  }
</style>

The probability that this layout is affected by internal elements and destroys the layout is low, but when the browser screen is reduced to a certain extent, the content on the left and right sides will fall off or overlap. The solution is to add a minimum width to the body (at least greater than the sum of the widths of the left and right sides)

Double Flying Wing Layout

The idea is consistent with the Holy Grail layout, but there are some subtle differences.

HTML structure settings

Create a new parent element, including three child elements: left, main, right (note that main is written in front, so that the middle will be loaded first when the page is rendered. For Interview questions load the middle part first)

style style settings

1. Set the height of the parent element
2. Set float for all three elements
3. The middle main part has a fixed width of 100 %: width: 100%, set the width and height on the left and right sides according to product requirements
4. Add a box inner to the main part in the middle to place the content (different from the Holy Grail layout)
5. Set margin-left on the left: -100%; set margin-right on the right: -right box width
6. Add a new box, inner, set left and right padding or margin

<div class="container">
   <div class="main f">
      <div class=inner>go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
   </div>
   <div class="left f"></div>
   <div class="right f"></div>
</div>
<style>
  .container {
     height: 300px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
  }
  .inner {
    padding: 0 200px 0 200px;
  }
</style>

Self-floating

HTML structure settings

Create three new elements: left, right, main (note, main is written at the end)

style style settings

1. The left box floats left and the right box floats right
2. Set the margin or padding value in the middle part

<div class="left"></div>
<div class="right"></div>
<div class="main">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
<style>
    .main {
        margin: 0 200px 0 200px;
        background-color: red;
        height: 200px;
    }
    .left {
        float: left;
        width: 200px;
        background-color: blue;
        height: 200px;
    }
    .right {
        float: right;
        width: 200px;
        background-color: pink;
        height: 200px;
    }
</style>

New features of CSS3: flex

HTML structure setting

Create a new parent element, including three child elements: left, main , right (note, main is written in the middle)

style style setting

1. Set the width of the parent element to 100%, display: flex;
2. The left and right are according to product requirements Set width and height
3. Set flex in the middle part: 1;

<div class="container">
  <div class="left"></div>
  <div class="main">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
  <div class="right"></div>
</div>
<style>
    .container {
       width: 100%;
       height: 200px;
       display: flex;
   }
   .main {
       flex: 1;
       background-color: red;
       height: 200px;
   }
   .left {
       width: 200px;
       background-color: blue;
       height: 200px;
   }
   .right {
       width: 200px;
       background-color: pink;
       height: 200px;
   }
</style>

There are other ways to write them, so I won’t go into details here. I just list some of the more commonly used ones and those that may be asked in interviews. Condition. CSS3 also has many interesting features that are worth studying in depth during work and study.

Fixed left and right sides in the middle are adaptive

Floating negative margins (Holy Grail layout)

HTML structure settings

Create a new parent Element, including three sub-elements: left, main, right (note, main is written in the middle)

style style setting

1. The left and right sides each occupy 50% of the width
2. The left negative margin margin-left accounts for half of the width of the middle p
3. The right negative margin margin-right also accounts for half of the width of the middle p

 <div class="container">
   <div class="left"></div>
   <div class="main">我是中间内容</div>
   <div class="right"></div>
 </div>
 <style>
    .main {
        width: 100px;
        text-align: center;
        float: left;
        background-color: lightgreen;
        height: 300px;
    }
    .left {
        height: 300px;
        float: left;
        width: 50%;
        margin-left: -50px;
        background-color: pink;
    }
    .right {
        height: 300px;
        float: right;
        width: 50%;
        margin-right: -50px;
        background-color: cornflowerblue;
    }
 </style>

New features of CSS3: flex

HTML structure settings

Create a new parent element, including three child elements: left, main, right

Style settings

1. Parent element settings display: flex; flex- direction: row;
2. Set flex-grow: 1 on the left and right, and divide the remaining space equally

 <div class="container">
   <div class="left"></div>
   <div class="main">我是中间内容</div>
   <div class="right"></div>
 </div>
 <style>
    .container {
        display: flex;
        flex-direction : row;
    }
    .main {
        width: 200px;
        height: 300px;
        text-align: center;
        background-color: lightgreen;
    }
    .left {
        height: 300px;
        flex-grow: 1;
        background-color: pink;
    }
    .right {
        height: 300px;
        flex-grow: 1;
        background-color: cornflowerblue;
    }
 </style>

CSS3 feature calc (four arithmetic operations)

is used to dynamically calculate the length value. It should be noted that a space needs to be reserved before and after the operator, for example: width: calc(100% - 50px).

HTML structure settings

Create a new parent element, including three child elements: left, main, right

style style settings

1. Parent element settings 100% width;
2. Set width on the left and right: calc(50%, - middle width/2)

 <div class="container">
   <div class="left"></div>
   <div class="main">我是中间内容</div>
   <div class="right"></div>
 </div>
 .container {
     width: 100%;
     height: 300px;
 }
 .f {
     float: left;
 }
 .main {
     width: 100px;
     text-align: center;
     background-color: lightgreen;
     height: 300px;
 }
 .left {
     height: 300px;
     background-color: pink;
     width: calc(50% - 50px);  /*平分中间部分的宽度*/
 }
 .right {
     height: 300px;
     background-color: cornflowerblue;
     width: calc(50% - 50px);  /*平分中间部分的宽度*/
 }

The road is long and long, and if you are not as smart as others, just keep working hard and believe that hard work can make up for your shortcomings. . Make a little progress every day, and one day you will take a big step forward.

The above is the detailed content of Summary of implementation methods of CSS three-column layout (code example). For more information, please follow other related articles on the PHP Chinese website!