introduce

  • In simple terms, the page is divided into three parts: left, middle and right. The left and right sides are fixed widths, and the middle part is adaptive.

implementation

  • Assume each column is 150px high, the left column is 200px wide, the right column is 150px wide, and the middle section is adaptive.

Method one: float around + 100% width in the middle

HTML structure

  • A parent element is required to wrap the three columns, in this case container
<style type="text/css">
  /* Set the left and right inner margins */
  .container {
     padding-left: 200px;  /* Left column width */
     padding-right: 150px; /* Right column width */
  }
</style>
<div class="container"></div>
Copy the code

Add three columns to the Container

  • Set all three columns float:left; Make it appear in the same row
  • Since the center width of 100% fills up the parent element, left and right can only be displayed on a newline
<style type="text/css">
  .container div {
     height: 150px;
     color: white;
     line-height: 150px;
     float: left;
  }
  .center {
     width: 100%;
     background-color: #50bf3c;
  }
  .left {
     width: 200px;
     background-color: #ff5722;
  }
  .right {
     width: 150px;
     background-color: #2196f3;
  }
</style>
<div class="container">
    <div class="center">Intermediate customization</div>
    <div class="left">On the left side of the fixed width</div>
    <div class="right">On the right side of fixed width</div>
</div>
Copy the code

Move left up to Center for peer display

  • Set the margin – left: – 100%; Left moves up to center and overlaps center
.left {
   margin-left: -100%;
}
Copy the code

  • Sets the relative position and moves left to the left of the parent element
.left {
   position: relative;
   right: 200px; /* Self width */
}
Copy the code

Move right up to Center for peer display

  • Set the margin – right: – 150 px; Move right up to center to complete the Grail layout. Change the window size at this time, the middle area will adapt to change.
.right {
   margin-right: -150px;
}
Copy the code

The key point

  • Center is placed in front of the document flow for priority rendering
  • Use negative margins
  • Left uses relative positioning

Method two: absolute positioning + middle width is not given

The complete code

<style type="text/css">
   .container {
      position: relative;
      text-align: center;
   }
   .container div {
      height: 150px;
      color: white;
      line-height: 150px;
   }
   .center {
      background-color: #50bf3c;
      margin-left: 200px;
      margin-right: 150px;
   }
   .left {
      width: 200px;
      background-color: #ff5722;
      position: absolute;
      top: 0px;
      left: 0px;
   }
   .right {
      width: 150px;
      background-color: #2196f3;
      position: absolute;
      top: 0px;
      right: 0px;
   }
</style>
<div class="container">
    <div class="center">Intermediate adaptive</div>
    <div class="left">On the left side of the fixed width</div>
    <div class="right">On the right side of fixed width</div>
</div>
Copy the code

The key point

  • Use absolute positioning on the left and right sides and margin in the middle

Method 3: Flex

HTML structure
<div class="container">
    <div class="center">Intermediate adaptive</div>
    <div class="left">On the left side of the fixed width</div>
    <div class="right">On the right side of fixed width</div>
</div>
Copy the code

Set container to an elastic layout, display:flex;

  • Container becomes a Flex container, and the child elements Center, left, and right automatically become Flex Items
.container {
  display:flex;
}
Copy the code

Adjust the position of items

  • Position is adjusted by setting the order property of item
  • The default value of order is 0, and the smaller the value, the higher the item
.left {
  order: -1;
}
Copy the code

Left and right sides constant width

  • Set the flex-basis property of item to a fixed width
.left {
  flex-basis: 200px;
}
.right {
  flex-basis: 150px;
}
Copy the code

Center automatically fills the remaining space

  • Set the flex-grow property of item to 1, default to 0
.center {
  flex-grow:1;
}
Copy the code

The key point

  • The parent element is set to an elastic box
  • Use flex-basis on the left and right sides to set the size of the element itself
  • Use the flex-grow setting to fill up the remaining space