Blue is the main part and red + green is the handle

Let’s start with specific requirements:

Requirements: For the following DOM structure, write CSS to achieve a three-column horizontal layout, where left and right are located on the left and right sides respectively, the width of left is 200px, the width of right is 300px, main is in the middle, the width is adaptive. Additional DOM nodes are allowed, but the order of existing nodes cannot be modified.

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

To understand the meaning, main layout first, rendering display in the browser first, middle width adaptive, left and right width limit.

Then write the code! What else can you do?!

First, write the basic style:

.left, .main, .right { min-height: 200px; } // limit height, keep the same. Left {background: red; width: 200px; } .main { background-color: blue; } .right { background-color: green; width: 300px; }Copy the code

The container layout is relative, so secure the container position first

.container{
    padding: 0 300px 0 200px;
}
Copy the code

At this point the 200px and 300px Spaces on the left and right sides are reserved.

Now what we need to do is to float all three modules to the left and adjust the position of the left and right sides.

.main,.left,.right{
    min-height: 200px;
    float: left;
}
Copy the code

.left{
    width: 200px;
    background: red;
}
.right{
    width: 300px;
    background: blue;
}
.main{
    width: 100%;
    background: green;
}
Copy the code

.left{
    margin-left: -100%;
    width: 200px;
    background: red;
}
.right{
    margin-left: -300px;
    width: 300px;
    background: green;
}
Copy the code

Margin-left allows elements to flow to the left, or up one layer if they are too negative.

.main,.left,.right{
    position: relative;
    min-height: 200px;
    float: left;
}
.main{
    width: 100%;
    background: blue;
}
.left{
    background: red;
    width: 200px;
    margin-left: -100%;
    left: -200px;
}
.right{
    background: green;
    width: 300px;
    margin-left: -300px;
    right: -300px;
}
Copy the code

<! DOCTYPE html> <html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge""> <title> </title> <style lang="text/css">
    .container {
      padding: 0 300px 0 200px;
    }

    .left,
    .main,
    .right {
      min-height: 130px;
      float: left;
      position: relative;
    }

    .left {
      background: red;
      margin-left: -100%;
      width: 200px;
      left: -200px;
    }

    .main {
      background-color: blue;
      width: 100%;
    }

    .right {
      background-color: green;
      width: 300px;
      margin-left: -300px;
      right: -300px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

</html>
Copy the code