CSS layout – two column layout/three column layout

A two-column layout

One column is fixed width, one column is adaptive

<div class="container">
    <div class="left">Left fixed</div>
    <div class="right">Right adaptive</div>
</div>
Copy the code

• 1. Left float:left + right margin-left

.left{
    float: left;    /* Fixed side float */
    width: 100px;
    height: 200px;
    background-color: skyblue;
  }
  .right{
    margin-left: 100px;  /* Is the width of the fixed side */
    height: 200px;
    background-color: pink;
  }
Copy the code

Because of the fluid nature of block-level elements, the external container is populated by default, so you only need to set margin, and you can fill the rest of the content without setting width.

• 2. Left float:left + right overflow:hidden

.left{
    float: left;
    width: 100px;
    height: 200px;
    background-color: skyblue;
  }
  .right{
    height: 200px;
    overflow: hidden;   /* Trigger BFC, separate container, retain fluid properties, automatically retreat to float element width distance */
    background-color: pink;
  }
Copy the code

Setting Overflow: Hidden triggers a block-level formatting context (BFC). Elements with BFC characteristics can be thought of as separate containers, and the elements inside the container do not affect the layout of the elements outside the container. The element that triggered the BFC remains fluid, that is, the BFC element does not intersect with the floating element and automatically retreats from the width of the floating element, but the fluid nature of the normal element still exists, which is reflected in the layout by automatically filling the remaining space except for the floating content.

BFC has the characteristics that ordinary elements do not have: the bottom margin does not fold; Can clear float; Can prevent elements from being overwritten. Because of these features, the left side float can be cleared with elements that trigger the BFC.

The BFC can be triggered by:

• Body root element
• Float elements (except float: None)
• Positioning elements (Absolute, fixed)
• Display (inline-block, table-cells, flex)
• Overflow (hidden, auto, scroll)

noteIf right is fixed and left is adaptive, the.right div is above the.left div in the HTML structure. If right is written below, the.left element will not leave the document flow, and the.right will be on its own line and will not achieve the desired result.

• 3. Use absolute position

 .container{
    position: relative;
  }
  .left{
    height: 200px;
    width: 100px;
    background-color: skyblue;
  }
  .right{
    height: 200px;
    position: absolute;   /* Set the relative position of the parent element */
    top: 0;
    left: 100px;   /* left is the width of the left box */
    right: 0;  /* Set right:0; To limit the width of the right block-level element */
    background-color: pink;
  }
Copy the code

• 4. Use flexible Layout Flex (recommended)

 .container{
    display: flex;
  }
  .left{
    height: 200px;
    width: 100px;
    background-color: skyblue;
  }
  .right{
    height: 200px;
    flex: 1;    /* Automatically fills the container */
    background-color: pink;
  }
Copy the code

The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional. Flex -grow: defines the size of the project, default to 0, that is, if there is room left, no flex-grow: defines the size of the project, default to 1, that is, if there is insufficient space, the project will shrink flex-basis: Before assigning excess space to the above two attributes, calculate whether the project has excess space. The default is Auto, which is the size of the project itself

A column of variable width, a column adaptive

The width of the variable side will scale with the size of the content inside, and the content will be spread out without setting the width.

• 1. Left float:left + right overflow:hidden

 .left..right{
    height: 200px;
  }
  .left{
    float: left;
    background-color: skyblue;
  }
  .right{
    overflow: hidden;
    background-color: pink;
  }
Copy the code

• 2. Flex layout

  .container{
    display: flex;
  }
  .left..right{
    height: 200px;
  }
  .left{
    background-color: skyblue; 
  }
  .right{
    flex: 1;    
    background-color: pink;
  }
Copy the code

Set the height of the two columns to be equal

In the above method, the height of.left and.right is set to be the same, but if you do not set the height, the height will be separated by the content, and the two columns will not be the same height, as shown in the figure below:

<div class="container">
    <div class="left">I'm left-- I'm left-- I'm left-- I'm left</div>
    <div class="right">I'm right I'm right I'm right I'm right I'm right I'm right</div>
  </div>
Copy the code

• 1. Set the columns to be the same height
• 2. Use flex with an elastic layout

  .container {
    display: flex;
  }
  .left{
    background-color: skyblue;
  }
  .right{
    background-color: pink;
  }
Copy the code

Left and right width ratio 1:2, the right side is divided into upper and lower structure, height ratio 1:1

  <div class="container">	
    <div class='left'>left</div>
    <div class='right'>
      <div class="rigTop">
        rigTop
      </div>
      <div class="rigBottom">
        rigBot
      </div>
    </div>
  </div> 
Copy the code

.container {
    display: flex;
  }
  .left{
    width: 33.3%;
    height: 100px;
    background-color: skyblue;
  }
  .right{
    flex: 1;
    height: 100px;
    background-color: pink;
  }
  .rigTop..rigBottom {
    height: 50%;
  }
Copy the code

Three column layout

The so-called three-column layout refers to the page is divided into three parts, left and right fixed, the middle part of a self-adaptive layout.

Flexible Layout Flex (recommended)

  <div class="container">
    <div class="left">left</div>
    <div class="center">center--center--center--center--center--center--center--center--center</div>
    <div class="right">right</div> 
  </div>
Copy the code

.container{
  display: flex;
}
.left {
    background: green;
    width: 200px;
    height: 200px;;
}
.center {
    background: pink;
    height: 200px;;
    flex: 1;
}
.right {
    background: skyblue;
    width: 300px;
    height: 200px;;
}
Copy the code

Absolute positioning

  <div class="left">left</div>
  <div class="center">center--center--center--center--center--center--center--center--center</div>
  <div class="right">right</div> 
Copy the code

/* Simply go to CSS reset */
  body.html{
    height: 100%;
    padding: 0;
    margin: 0;
  }
  .left..right{
    position: absolute;
    top: 0;
    background-color: skyblue;
    height: 100%;
  }
  .left {
    left: 0;
    width: 100px;
  }
  .right {
    right: 0;
    width: 200px;
  }
  .center {
    margin-left: 100px;
    margin-right: 200px;
    height: 100%;
    background-color: pink;
  }
Copy the code

floating

    <div class="left">left</div>
    <div class="right">right</div> 
    <div class="center">center--center--center--center--center--center--center--center--center</div>
    <! -- Notice the order of div elements -->
Copy the code

body.html {
    height:100%;
    padding: 0;
    margin: 0
}
.left {
    background: green;
    width: 200px;
    float: left;
    height: 100%;
}
.center {
    background: pink;
    height: 100%;
    margin:0px 300px 0px 200px;
}
.right {
    background: skyblue;
    width: 300px;
    float: right;
    height: 100%;
}
Copy the code

The holy grail layout

    <div class="center">center--center--center--center--center--center--center--center--center</div>
    <div class="left">left</div>
    <div class="right">right</div> 
Copy the code

/* Simply go to CSS reset */
  body.html{
      height:100%;
      padding: 0;
      margin: 0;
  }
  /* The parent element body leaves the left and right columns */
  body {
      padding-left: 200px;
      padding-right: 300px;
  }
  .center {
      background: pink;
      width: 100%;/* The middle part of the width is adaptive so use 100%, left, middle, right and left float, the middle 100%, then the left and right layer under the center, so also need to set the left and right margin and positioning */
      height: 200px;
      float: left;
  }
  .left {
      background: green;
      width: 200px;
      float: left;
      margin-left: -100%;  /* left margin -100; left margin -100; left margin -100; Now the left moves up to block the content of the center */
      position: relative;   /* Position yourself relative to yourself to occupy the position vacated by the body */
      left: -200px;  /* Offset is its own width */
      height: 200px;
  }

  .right {
      background: skyblue;
      width: 300px;
      height: 200px;
      float: left;
      margin-left: -300px;
      position: relative;
      right: -300px;
  }
Copy the code

Twin wing layout

The problem with the Holy Grail layout is that when the browser width shrinks to a point where the width of the middle child is smaller than the width of the left and right child, the layout becomes problematic, as shown below:This also reminds us that when using the Grail layout, it is important to set the minimum width of the entire container to avoid the following layout confusion.

In both holy Grail and Holy Grail layouts, float all the columns on the left and right. Add a negative margin on the left and right columns and make them side by side with the middle column div. The difference is that the middle column div content is not blocked.

• Holy Grail layout: After setting the body to left and right padding-left and padding-right, use relative positioning and width attributes to achieve no occlusion
• Double wing layout: the middle div is wrapped with a layer of div, and margin-left and margin-right are used to leave space for the left and right columns of div

  <div class="mid">
    <div class="center">center--center--center--center--center--center--center--center--center</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div> 
Copy the code

/* Simply go to CSS reset */
body.html {
    height:100%;
    padding: 0;
    margin: 0
}
.left {
    background: green;
    width: 200px;
    float: left;
    margin-left: -100%;
    height: 100%;
    /*position: relative; * /
    /*left:-200px; * /
}
.mid {
    background: pink;
    width: 100%;
    float: left;
    height: 100%;
}
.right {
    background: skyblue;
    width: 300px;
    float: left;
    margin-left: -300px;
    height: 100%;
    /*position:relative; * /
    /*right:-300px; * /
}
.center {
    margin-left: 200px;
    margin-right: 300px;
}
Copy the code

Reference document: Common CSS layouts