Three-column layout background

  • Three column elements, left and right elements of fixed width;
  • Adaptive intermediate elements;
<div id="left">
	left
</div>
<div id="middle">
	middle
</div>
<div id="right">
	right
</div>
Copy the code

Positioning implements a three-column layout

  • The left and right columns are absolutely positioned and of fixed width;
  • The middle element is self-adaptive, and the left and right margin is set to the width of the left and right elements;
  • Disadvantages of positioning: The content area appears behind the scrollbar when it appears, and the content area is still compressed (not recommended)
*{ margin: 0; padding: 0; } body{/* minimum width = left *2 + right */ min-width: 600px; }#left,#right{
    width: 200px;
    height: 200px;
    background: pink;
}
#middle{height: 200px; background: green; } // Set the three columns#left{position: absolute; left: 0; top:0; /* Opacity 0-1*/ /*opacity: 0.5; * /}#right{
    position: absolute;
    top:0;
    right: 0;
}
#middle{
    margin: 0 200px;
}
Copy the code

Float implements a three-column layout

  • Note: Since the float is out of the document flow, middle must be placed at the end of the three column elements;
<div id="left">left</div>
<div id="right">3</div>
<div id="middle">2</div>
Copy the code
  • Disadvantages: If there is text, the layout will be distorted, resulting in poor scalability.
* { margin: 0; padding: 0; } body{/* minimum width = left*2 + right*/ min-width: 600px; }#left,#right{
   width: 200px;
   height: 200px;
   background-color:pink;
}
#middle{
   height: 200px;
   background-color: green;
}
#left{
   float: left;
}
#right{
   float: right;
}
Copy the code
  • If there is text added, the problem appears:
    • 1. Middle does not float, left and right float;
    • 2. The nature of the float is to solve the text around the image, so the added text should be arranged around the nearest floating element;
    • 3. Squeezing out the unfloating Middle.
<body> Here are words there are words there are words there are words there are words there are words there are words there are words there are words there are words there are words there are words there are words there are words there are words there are words there are words there are words there are words there are words there are words there are words there are words there are words You have text here and you have text here and you have text here and you have text here and you have text here and you have text here and you have text here and you have text here and you have text here and you have text here and you have text <div id="left">left</div>
	<div id="right">3</div>
	<div id="middle">2</div>
</body>
Copy the code

The holy grail layout

  • Grail layout requirements: with the change of page width, the middle box in the three-column layout is preferentially adaptive rendering, and the width of the two boxes is fixed;
  • Requirements:
    • 1. Both sides are fixed and the middle is adaptive;
    • 2. Load the middle content first.
    • 3. Three-column contour layout;
<div class="wrap">
  <div id="header">header</div>
  <div id="content">
    <div id="middle">
      <p>middle</p>
      <p>middle</p>
      <p>middle</p>
    </div>
    <div id="left">left</div>
    <div id="right">right</div>
  </div>
  <div id="footer">footer</div>
</div>
Copy the code
  • Steps:
    • Layout: there is a header, there is a tail, there is content, the middle part should be placed in the first part of the content, then the left, reight;
    • Float the three in a row, height collapse, content float clear;
    • Middle width set to 100%, full;
    • Margin-left: -100%; margin-left: -100%; Margin-left :-200px; margin-left:-200px;
    • Content :{padding: 0 200px};
    • The lefe and right are pulled back, leaving 200px left and right empty. So use relative positioning to pull left and right back;
  • Question:
    • If there is too much in one column, the text will overflow. Solution: contour layout;
    • Min-width :600px
.wrap{
  min-width: 600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    border: 1px solid;
    background-color: grey;
}
#content{ 
  overflow: hidden;
  padding: 0px 200px;
}
#left,#right{
  width: 200px;
  height: 200px;
  background-color:pink;
}
#middle{
  background-color: green;
  width: 100%;
}
#middle,#left,#right{
  float: left;
  padding-bottom: 10000px;
  margin-bottom: -10000px;
}
#left{
  margin-left: -100%;
  position: relative;
  left: -200px;
}
#right{
  margin-left: -200px;
  position: relative;
  left: 200px;
}
Copy the code

Twin wing layout

  • Requirements are the same as the Holy Grail layout;
  • “Middle” is the body of a bird, and “left” and “right” are the wings of a bird. First put the main thing “middle” in place, and then move the wings to the appropriate position.
  • steps
    • Middle is the first part of the content, then left, reight;
    • Float the three in a row, height collapse, content float clear;
    • Middle width set to 100%, full;
    • Margin-left: -100%; margin-left: -100%; Margin-left :-200px; margin-left:-200px;
    • Above, all the same layout as the Grail;
    • Since the content of the middle is covered by the left and right, we can consider setting the padding of the outer content as well as using a margin to pull the middle over.
    • Add a middle-inner element to middle and set its margin to 0 200px;
// HTML, add middle-inner <div class= middle"wrap">
  <div id="header">header</div>
  <div id="content">
    <div id="middle">
      <div class="middle-inner">
        middle
      </div>
    </div>
    <div id="left">left</div>
    <div id="right">right</div>
  </div>
  <div id="footer">footer</div>
</div>

// css
.wrap{
  min-width: 600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    border: 1px solid;
    background-color: grey;
}
#left,#right{
  width: 200px;
  height: 200px;
  background-color:pink;
}
#middle{
  background-color: green;
  width: 100%;
  float: left;
}
#content{
  overflow: hidden;
}
#left{
  float: left;
  margin-left: -100%;
}
#right{
  float: left;
  margin-left: -200px;
}
.middle-inner{
  margin: 0 200px;
}
Copy the code