1. Float 2. Position 3. Flex 4. Grail layout 5

1, floating,

The first is floating: floating around the middle does not float

    <style>     
  body {
      margin: 0;
      padding: 0;
  }
  .container {
      width: 100%;
      height: 200px;
  }
   .left {
       width: 300px;
       height: 200px;
       background-color: green;
      float: left;
   }
   .right{
       width: 300px;
       height: inherit;
       background-color: red;
       float: right;
   }
   .middle {
       background-color: rosybrown;
       height: inherit;        
   }

    </style>
</head>
<body>
    <div class="container ">
      <div class="left"></div>  
      <div class="right"></div>  
      <div class="middle">Three column layout</div> 
      
    </div>
    
</body>
Copy the code

2, positioning

Use absolute positioning left and right to move to the middle of both sides and set left and right as appropriate

  <style>     
  body {
      margin: 0;
      padding: 0;
  }
  .container {
      width: 100%;
      height: 200px;
      position: relative;
  }
   .left {
       width: 300px;
       height: 200px;
       background-color: green;
       position: absolute;
       left:0;
   }
   .right{
       width: 300px;
       height: inherit;
       background-color: red;
       position: absolute;
       right: 0;
   }
   .middle {
       background-color: rosybrown;
       height: inherit;
       position: absolute;
       left: 300px;
       right: 300px;     
   }

    </style>
</head>
<body>
    <div class="container ">
      <div class="left"></div>  
      <div class="middle">Three column layout</div> 
      <div class="right"></div>  
      
    </div>
Copy the code

3. The flex layout

Set the parent element display to a three-column layout for Flex

<style>
        
  body {
      margin: 0;
      padding: 0;
  }
  .container {
      width: 100%;
      height: 200px;
     display: flex;
  }
   .left {
       width: 300px;
       height: 200px;
       background-color: green;
   }
   .right{
       width: 300px;
       height: inherit;
       background-color: red;
   }
   .middle {
       background-color: rosybrown;
       height: inherit;
       flex: 1;
       
   }

    </style>
</head>
<body>
    <div class="container ">
      <div class="left"></div>  
      <div class="middle">Three column layout</div> 
      <div class="right"></div>  
      
    </div>
    
</body>
Copy the code

4. Grail layout

The header and footer occupy all the width of the screen, and the height is fixed. The container in the middle is a three-column layout. The width of the three-column layout is fixed on both sides, and the middle section automatically fills the entire area. The height of the middle section is the height of the highest area of the three columns.

<! DOCTYPE html><html>
 
<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
  body {
    min-width: 550px;  /* 2x leftContent width + rightContent width */
    font-weight: bold;
    font-size: 20px;
  }
 
  #header.#footer {
    background: rgba(29.27.27.0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #footer {
    clear: both;
  }
 
  #container {
    padding-left: 200px;   /* leftContent width */
    padding-right: 150px;  /* rightContent width */
    overflow: hidden;
  }
 
  #container .column {
    position: relative;
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
 
  #center {
    width: 100%;
    background: rgb(206.201.201);
  }
 
  #left {
    width: 200px;           /* leftContent width */
    right: 200px;           /* leftContent width */
    margin-left: -100%;
    background: rgba(95.179.235.0.972);
  }
 
  #right {
    width: 150px;           /* rightContent width */
    margin-left: -150px;   /* rightContent width */
    right: -150px;
    background: rgb(231.105.2);
  }
 
</style>
 
<body>
  <div id="header">#header</div>
  <div id="container">
    <div id="center" class="column">#center</div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>
 
 
</body>
 
</html>
Copy the code

5. Double flying wing layout

Double wing layout: In order to make the middle div content is not blocked, create a child div directly inside the middle div to place the content, and use margin-left and margin-right to leave space for the left and right columns of the div. I’m going to put middle in front and I’m going to set width of middle to 100%, left right to float left left middle and right to float left and now middle is full, so I’m going to pull left to the far left, Use the margin – left: – 100%; Margin-left is between the parent and the child, indicating the distance between the left margin of the element and the left inner margin of the parent. Margin-left is set to a negative value to indicate the proximity of the next box. There is no need to set “right” when using “location”

 <style>     
  *{
      margin: 0;
      padding: 0;
  }
   .header,
    .footer {
            height: 100px;
            line-height: 100px;
            background-color: green;
            text-align: center;
            font-size: 30px;
            font-weight: bolder;
        }

 .footer {
            background-color: goldenrod;
        }
  .container {
      height: 200px;
  }
   .left {
       width: 300px;
       height: 200px;
       background-color: green;
       float: left;
       margin-left:-100%;
   }
   .right{
       width: 300px;
       height: inherit;
       background-color: red;
       float: left;
      margin-left: -300px;
   }
   .middle {
       background-color: rosybrown;
       height: inherit;  
       width: 100%;      
       float: left;
   }
   .inner {
            margin: 0 220px 0 200px;
            min-height: 130px;
            background: blue;
            word-break: break-all;
        }

    </style>
</head>
<body>
    <div class="header">header</div>
    <div class="container">
        <div class="middle">
            <h4>middle</h4>
            <div class="inner">
                <h4>middle</h4>
                <p>The middle box</p>
            </div>
        </div>
        <div class="left">
            <h4>left</h4>
            <p>The box on the left</p>
        </div>
        <div class="right">
            <h4>right</h4>
            <p>The box on the right</p>
        </div>
    </div>
    <div class="footer">footer</div>
    
</body>
Copy the code