CSS Layout overview

For more CSS, see my column at 👉

preface

Some of the symbols in this article stand for:

👍 recommended writing, good compatibility, writing convenient and easy to understand
👌 has some problems, poor compatibility or suitable for specific occasions or redundant writing
👎 will have some common requirements can not be achieved or difficult to achieve problems, harm more than good

One, two column layout

1.1 The width of the left column is fixed, and the right column is adaptive

Effect:

1) float + margin 👍

Margin-left of. Right is equal to the width of. Left in order not to be blocked by. Left

<style>
  .left {
    background-color: #ffcc99;
    width: 100px;
    height: 500px;
    float: left;
  }

  .right {
    background-color: #99cccc;
    height: 500px;
    margin-left: 100px;
  }
</style>
<body>
  <div class="left">left</div>
  <div class="right">rigth</div>
</body>
Copy the code

(2) float + margin 👎 (fix)

Compared to the above method more than some code, understand trouble, not recommended.

<style>
  .left {
    background-color: #ffcc99;
    width: 100px;
    height: 500px;
    float: left;
  }

  .right-fix {
    float: right;
    width: 100%;
    margin-left: -100px; /* A positive value greater than or equal to the width of left to move up a line */
  }

  .right {
    background-color: #99cccc; /* left*/
    margin-left: 100px;
    height: 500px;
  }
</style>
<body>
  <div class="left">left</div>
  <div class="right-fix">
    <div class="right">right</div>
  </div>
</body>
Copy the code

(3) float + overflow 👍

Utilizes the BFC feature

The disadvantage is that after the right BFC, the interval mode is set

To the right settingmargin-leftIs greater than left
Set left directlymargin-right

<style>
  .left {
    background-color: #ffcc99;
    width: 100px;
    height: 500px;
    float: left;
  }


  .right {
    background-color: #99cccc;
    height: 500px;
    overflow: hidden;
  }
</style>

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

(4) use the table 👎

Margin will be invalid and not optimal

<style>
  #parent{
    width: 100%;
    display: table;
    height: 500px;
  }
  #left {
    width: 100px;
    background-color: #f00;
  }
  #right {background-color: #0f0; }/* Automatically allocates the width using cells */
  #left.#right{display: table-cell; }</style>

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="right">The right column is adaptive</div>
</div>
</body>
Copy the code

(5) the position 👍

Easy to understand, but out of document flow

<style>
  #parent {
    position: relative;

  }

  #left {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #ffcc99;
    width: 100px;
    height: 500px;
  }


  #right {
    position: absolute;
    top: 0;
    left: 100px;
    right: 0;
    background-color: #99cccc;
    height: 500px;
  }
</style>

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

6. The Flex 👌

General compatibility

<style>
  #parent {
    display: flex;
    width: 100%;
  }

  #left {
    background-color: #ffcc99;
    width: 100px;
    height: 500px;
  }


  #right {
    flex:1;
    background-color: #99cccc;
    height: 500px;
  }
</style>

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

All landowners Grid 👌

General compatibility

<style>
  #parent {
    display: grid;
    grid-template-columns: 100px auto; /* auto = 1fr */
    grid-template-rows: 500px 500px;
  }

  #left {
    background-color: #ffcc99;
  }

  #right {
    background-color: #99cccc;
  }
</style>

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

1.2 The left column is adaptive and the right column is fixed width

Effect:

1) float + margin 👌

Slightly difficult to understand, margin or padding should correspond; Floating out of the document flow, you need to manually clear the floating, otherwise it will cause height collapse.

A few points to note:

One left float and one right float
Left with negativemargin-leftLeave enough space for the right to float
The parent ispadding-leftormargin-leftPush the left back.

<style>
  #parent {
    padding-left: 100px;
  }

  #left {
    float: left;
    background-color: #ffcc99;
    width: 100%;
    height: 500px;
    margin-left: -100px;
  }

  #right {
    float: right;
    width: 100px;
    height: 500px;
    background-color: #99cccc;
  }
</style>

<body>
  <div id="parent">
   	<div id="left">The left column is adaptive</div>
    <div id="right">Right column width</div>
  </div>
</body>
Copy the code

(2) float + overflow 👍

Write “right” before “left”, and use “margin-left” to control the spacing between the two columns

<style>
  #parent {
    margin-left: 100px;
  }

  #left {
    background-color: #ffcc99;
    height: 500px;
    overflow: hidden;
  }

  #right {
    float: right;
    width: 100px;
    height: 500px;
    background-color: #99cccc;
    margin-left: 10px; /* The spacing between the two columns is controlled by the right 'margin-left' */
  }
</style>

<body>
  <! -->
  <div id="right">Right column width</div>
  <div id="left">The left column is adaptive</div>
</body>
Copy the code

(3) the table 👎

Margin will be invalid and not optimal

<style>
  #parent{
    width: 100%;
    height: 500px;
    display: table;
  }
  #left {
    background-color: #f00;
    display: table-cell;
  }
  #right {
    width: 100px;
    background-color: #0f0;
    display: table-cell;
  }
</style>

<body>
<div id="parent">
    <div id="left">The left column is adaptive</div>
    <div id="right">Right column width</div>
</div>
</body>
Copy the code

(4) the position 👍

Out of document flow

<style>
  #parent {
    position: relative;
  }

  #left {
    position: absolute;
    top: 0;
    left: 0;
    right: 100px;
    background-color: #ffcc99;
    height: 500px;
  }

  #right {
    position: absolute;
    top:0;
    right: 0;
    width: 100px;
    height: 500px;
    background-color: #99cccc;
  }
</style>

<body>
  <div id="parent">
    <div id="left">The left column is adaptive</div>
    <div id="right">Right column width</div>
  </div>
</body>
Copy the code

(5) the Flex 👌

compatibility

<style>
  #parent {
    display: flex;
  }

  #left {
    flex: 1;
    background-color: #ffcc99;
    height: 500px;
  }

  #right {
    width: 100px;
    height: 500px;
    background-color: #99cccc;
  }
</style>


<body>
  <div id="parent">
    <div id="left">The left column is adaptive</div>
    <div id="right">Right column width</div>
  </div>
</body>
Copy the code

6. The Grid 👌

compatibility

<style>
  #parent {
    display: grid;
    grid-template-columns: auto 100px; /*auto <=> 1fr */
    grid-template-rows: 500px 500px;
  }

  #left {
    background-color: #ffcc99;
  }

  #right {
    background-color: #99cccc;
  }
</style>

<body>
  <div id="parent">
    <div id="left">The left column is adaptive</div>
    <div id="right">Right column width</div>
  </div>
</body>
Copy the code

1.3 One column expands according to the content, and the other column ADAPTS

1) float + overflow 👍

<style>
  #left {
    float: left;
    height: 500px;
    background-color: #ffcc99;
  }

  #right {
    height: 500px;
    overflow: hidden;
    background-color: #99cccc;
  }
</style>

<body>
  <div id="left">The left column is split open</div>
  <div id="right">The right column is adaptive</div>
</body>
Copy the code

(2) the Flex 👌

<style>
  #parent {
    display: flex;
  }

  #left {
    height: 500px;
    background-color: #ffcc99;
  }

  #right {
    flex: 1;
    height: 500px;
    background-color: #99cccc;
  }
</style>

<body>
  <div id="parent">
    <div id="left">The left column is split open</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

(3) the Grid 👌

<style>
  #parent {
    display: grid;
    grid-template-columns: auto 1fr; /* write 1fr auto is right spread left adaptive */
    grid-template-rows: 500px 500px;
  }

  #left {
    background-color: #ffcc99;
  }

  #right {
    background-color: #99cccc;
  }
</style>

<body>
  <div id="parent">
    <div id="left">The left column is split open</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

conclusion

This layout is often recommended to use a float, with overflow:hidden; Trigger BFC, very easy to use, compatibility is ok, but when setting the column spacing should be careful to set the value size and segmentation to left or right.

The parent phase of the child must be separated from the document flow can also be done, compatibility is good, code is not much.

On mobile, it’s recommended to go straight to Flex and use it whenever you can.

Table is not recommended, although compatibility is good, but other not aware of margin and other annoying.

Two, three column layout

2.1 Two columns have fixed width and one column is adaptive

1) float + margin 👍

<style>
  #left {
    float: left;
    width: 100px;
    height: 500px;
    background-color: #ffcc99;
  }

  #center {
    float: left;
    width: 150px;
    height: 500px;
    background-color: #FFCCCC;
  }

  #right {
    height: 500px;
    margin-left: 250px;
    background-color: #99cccc;
  }
</style>
<body>
  <div id="left">The left column width</div>
  <div id="center">In the middle of fixed width</div>
  <div id="right">The right column is adaptive</div>
</body>
Copy the code

(2) float + overflow 👍

<style>
  #left {
    float: left;
    width: 100px;
    height: 500px;
    background-color: #ffcc99;
  }

  #center {
    float: left;
    width: 150px;
    height: 500px;
    background-color: #FFCCCC;
  }

  #right {
    height: 500px;
    overflow: hidden;
    background-color: #99cccc;
  }
</style>

<body>
  <div id="left">The left column width</div>
  <div id="center">In the middle of fixed width</div>
  <div id="right">The right column is adaptive</div>
</body>
Copy the code

(3) the position 👌

The left attribute needs to be calculated accurately based on the width of the left center

<style>
  #parent {
    position: relative;
  }

  #left {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffcc99;
    width: 100px;
    height: 500px;
  }

  #center {
    position: absolute;
    top: 0;
    left: 100px;
    width: 150px;
    height: 500px;
    background-color: #FFCCCC;
  }

  #right {
    position: absolute;
    top: 0;
    left: 250px;
    right: 0;
    background-color: #99cccc;
    height: 500px;
  }
</style>

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="center">In the middle of fixed width</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

(4) the table 👎

<style>
  #parent {
    width: 100%; 
    height: 520px; /* Cancels out the height effect of the 10*2 spacing */
    margin: -10px 0;  /* Offset the position of the top and bottom 10 */
    display: table;
    /* The spacing between the left and right sides cannot be eliminated
    border-spacing: 10px;  / * key!!!!!! Set the spacing */
  }
  #left {
    display: table-cell;
    width: 100px;
    background-color: #f00;
  }
  #center {
    display: table-cell;
    width: 200px;
    background-color: #eeff2b;
  }
  #right {
    display: table-cell;
    background-color: #0f0;
  }
</style>

<body>
<div id="parent">
    <div id="left">The left column width</div>
    <div id="center">In the middle of fixed width</div>
    <div id="right">The right column is adaptive</div>
</div>
</body>
Copy the code

(5) the Flex 👌

<style>
  #parent {
    display: flex;
  }

  #left {
    background-color: #ffcc99;
    width: 100px;
    height: 500px;
  }

  #center {
    width: 150px;
    height: 500px;
    background-color: #FFCCCC;
  }

  #right {
    flex:1;
    background-color: #99cccc;
    height: 500px;
  }
</style>

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="center">In the middle of fixed width</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

6. The Grid 👌

I have to say that Grid is really easy to write this kind of thing, but unfortunately compatibility…

<style>
  #parent {
    display: grid;
    grid-template-columns: 100px 150px auto; /* auto <==> 1fr */
    grid-template-rows: repeat(3.500px);
  }

  #left {
    background-color: #ffcc99;
  }

  #center {
    background-color: #FFCCCC;
  }

  #right {
    background-color: #99cccc;
  }
</style>

<body>
  <div id="parent">
    <div id="left">The left column width</div>
    <div id="center">In the middle of fixed width</div>
    <div id="right">The right column is adaptive</div>
  </div>
</body>
Copy the code

2.2 Fixed width on both sides, adaptive in the middle

① Twin wing layout 👍[high frequency test site ⭐]

The basic principle is that the #center is as wide as the parent, and the #inner_center is left with a margin of #left #right

html:

<body>
  <div id="header">header</div>
  <div id="parent">
    <div id="center">
      <div id="inner_center">Intermediate adaptive</div>
    </div>
    <div id="left">The left column width</div>
    <div id="right">Right column width</div>
  </div>
  <div id="footer">footer</div>
</body>
Copy the code

css:

#header {
  height: 60px;
  background-color: #CCCCFF;
}

#left {
  float: left;
  width: 100px;
  height: 500px;
  /* margin-left gives the width of the entire #parent, so it can run to the far left */
  margin-left: -100%;
  background-color: #ffcc99;
}

#center {
  height: 500px;
  float: left;
  width: 100%;
}

#inner_center {
  height: 500px;
  /* If the left and right digits are larger than the actual width, the spacing can be created! * /
  margin: 0 200px 0 100px;
  background-color: #FFCCCC;
}

#right {
  float: left;
  width: 200px;
  height: 500px;
  /* margin-left gives the width of the entire #right itself, so that it can run to the far right */
  margin-left: -200px;
  background-color: #99cccc;
}

#footer {
  clear: both;
  height: 60px;
  background-color: #CCCCFF;
}
Copy the code

The left and right margin-left are used in a float layout. The left and right margin-left are used in a float layout. The left and right margin-left are used in a float layout.

The goal is to move the left and right into the position reserved for them by #inner_center.

② Grail layout 👎

The basic principle is that #parent leaves the left and right blank, #center takes up the full width, and #left and #right “squeeze” themselves into the target position with relative positioning.

html:

<body>
  <div id="header">header</div>
  <div id="parent">
    <div id="center">Intermediate adaptive</div>
    <div id="left">The left column width</div>
    <div id="right">Right column width</div>
  </div>
  <div id="footer">footer</div>
</body>
Copy the code

css:

#header {
  height: 60px;
  background-color: #CCCCFF;
}

#parent {
  height: 500px;
  /* To align #center, the left and right padding is equal to the width of the left and right boxes. * /
  padding: 0 200px 0 100px;
}

#left {
  float: left;
  /* Relative positioning and left move him to the left */
  position: relative;
  left: -100px;
  width: 100px;
  height: 500px;
  /* margin-left gives the width of the entire #parent, so it can run to the far left */
  margin-left: -100%;
  background-color: #ffcc99;
}

#center {
  float: left;
  height: 500px;
  width: 100%;
  background-color: #FFCCCC;
}

#right {
  float: left;
  /* Relative positioning and left move him to the right */
  position: relative;
  left:200px;
  width: 200px;
  height: 500px;
  /* margin-left gives the width of the entire #right itself, so that it can run to the far right */
  margin-left: -200px;
  background-color: #99cccc;
}

#footer {
  clear: both;
  height: 60px;
  background-color: #CCCCFF;
}
Copy the code

Here is a graph annotated with the left attribute #left and #right:

The layout of the Grail

Grail layout problems occur when center is less than left:

(3) the Grid 👌

html

<body>
  <div id="parent">
    <div id="header"></div>
    <div id="center">Intermediate adaptive</div>
    <div id="left">The left column width</div>
    <div id="right">Right column width</div>
    <div id="footer"></div>
  </div>
</body>
Copy the code

css

#parent {
  display: grid;
  grid-template-columns: 100px auto 200px; /* Set 3 columns */
  grid-template-rows: 60px 500px 60px; /* Set 3 lines */
  /* Set the grid area distribution */
  grid-template-areas: 
    "header header header" 
    "leftside main rightside" 
    "footer footer footer";
}
#header {
  grid-area: header; /* Specify which grid region */
  background-color: #CCCCFF;
}
#left {
  grid-area: leftside;
  background-color: #ffcc99;
}
#center {
  grid-area: main; /* Specify which grid region */
  margin: 0 15px; /* Set the interval */
  background-color: #FFCCCC;
}
#right {
  grid-area: rightside; /* Specify which grid region */
  background-color: #99cccc;
}
#footer {
  grid-area: footer; /* Specify which grid region */
  background-color: #CCCCFF;
}
Copy the code

(4) the Flex 👌

html

<body>
  <div id="all">
    <div id="header">header</div>
    <div id="parent">
      <div id="left">The left column width</div>
      <div id="center">Intermediate adaptive</div>
      <div id="right">Right column width</div>
    </div>
    <div id="footer">footer</div>
  </div>
</body>
Copy the code

css

#all {
  display: flex;
  flex-direction: column;
}

#header {
  height: 60px;
  background-color: #CCCCFF;
}

#footer {
  height: 60px;
  background-color: #CCCCFF;
}

#parent {
  height: 500px;
  display: flex;
}

#left {
  width: 100px;
  background-color: #ffcc99;
}

#center {
  flex: 1;
  /* Split the remaining part of #parent */
  background-color: #FFCCCC;
}

#right {
  width: 200px;
  background-color: #99cccc;
}
Copy the code

3. Multi-column layout

3.1 Multiple columns of equal width

1) float 👍

<style>
  #parent{
    /* Cancels the padding-left of the leftmost box */
    margin-left: -10px;
  }
  .column {
    float: left;
    /* Changing the width of the box model affects keeping the padding set on a line */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* Background-clip is just for easy viewing, because the padding is also the */ of the background color
    background-clip: content-box;
    width: 25%;
    height: 500px;
    Margin-left; margin-left; border-box; */
    padding-left: 10px;
  }

  .column:nth-child(2n) {
    background-color: #ffcc99;
  }

  .column:nth-child(2n-1) {
    background-color: #99cccc;
  }
</style>

<body>
  <div id="parent">
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
  </div>
</body>
Copy the code

(2) the table 👌

<style>
  #parent {
    height: 540px;  /* Counteracts the height effect of the 20*2 spacing */
    display: table;
    margin: -20px 0;  /* Offset the 20*2 spacing */
    /* The distance between the two sides of the page cannot be eliminated. Using the padding as a child element does not cause this problem
    border-spacing: 20px;  /* Set the spacing */
  }
  .column{display: table-cell; }.column:nth-child(odd){background-color: #f00; }.column:nth-child(even){background-color: #0f0; }</style>

<body>
  <div id="parent">
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
  </div>
</body>
Copy the code

(3) the Flex 👌

<style>
  #parent {
    display: flex;
    margin-left: -10px;
  }

  .column {
    flex: 1;
    width: 25%;
    height: 500px;
    margin-left: 10px;
  }

  .column:nth-child(2n) {
    background-color: #ffcc99;
  }

  .column:nth-child(2n-1) {
    background-color: #99cccc;
  }

</style>

<body>
  <div id="parent">
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
  </div>
</body>
Copy the code

(4) the Grid 👌

Again, Grid is convenient to write this layout…

<style>
  #parent {
    display: grid;
    grid-template-columns: repeat(4.1fr);
    grid-template-rows: 500px;
    column-gap: 10px;
  }

  .column {}

  .column:nth-child(2n) {
    background-color: #ffcc99;
  }

  .column:nth-child(2n-1) {
    background-color: #99cccc;
  }
</style>

<body>
  <div id="parent">
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
    <div class="column">Abba abba abba abba abba abba abba abba abba abba abba abba abba abba abba</div>
  </div>
</body>
Copy the code

3.2 scratchable latex

(1) the table 👍

<style>
  #parent {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    display: table;
  }
  .row {display: table-row; }.item {
    border: 1px solid # 000;
    display: table-cell;
  }
</style>
<body>
<div id="parent">
    <div class="row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="row">
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
    <div class="row">
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</div>
</body>
Copy the code

(2) the Flex 👌

<style>
  #parent {
    display: flex;
    flex-direction: column;
  }

  .row {
    display: flex;
    flex: 1;
  }

  .item {
    flex: none;
    height: 200px;
    width: 200px;
    background-color: #ffcc99;
    padding-right: 10px;
    padding-bottom: 10px;
    background-clip: content-box;
  }
</style>

<body>
  <div id="parent">
    <div class="row">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
    <div class="row">
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>
    <div class="row">
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </div>
</body>
Copy the code

③ Flex wrap optimization 👍

This method does not need three sets of lines, more flexible, the number of unlimited, to meet the three child line wrapping.

HTML:

<body>
  <div id="parent">
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
  </div>
</body>
Copy the code

CSS:

#parent {
  width: 80%;
  margin: 0 auto;
  display: flex;
  / * * / a new line
  flex-wrap: wrap;
}

#parent>.child {
  /* Split width */
  width: calc(100% / 3);
  height: 100px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Spacing control */
  padding-right: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  background-color: #ffcc99;
  background-clip: content-box;
}
Copy the code

(4) the Grid 👍

<style>
  #parent {
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3.1fr);
    grid-template-rows: repeat(3.100px);
    /* Spacing control */
    gap: 10px;
    /* Controls the height outside the 9x9 range */
    grid-auto-rows: 100px;
  }

  #parent>.child {
    background-color: #ffcc99;
  }
</style>

<body>
  <div id="parent">
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
    <div class="child">
      <span>1</span>
    </div>
  </div>
</body>
Copy the code

4. Full screen layout

(1) the position 👍

More code, but compatible OK

<style>
  html.body.#parent {
    height: 100%;
    overflow: hidden;
  }

  #parent>div {
    border: 1px solid # 000;
  }

  #top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
  }

  #left {
    position: absolute;
    top: 100px;
    /* is greater than or equal to the height of #top */
    left: 0;
    bottom: 50px;
    /* is greater than or equal to the height of #bottom */
    width: 200px;
  }

  #right {
    position: absolute;
    overflow: auto;
    left: 200px;
    /* the value is greater than or equal to the width of #left */
    right: 0;
    top: 100px;
    /* is greater than or equal to the height of #top */
    bottom: 50px;
    /* is greater than or equal to the height of #bottom */
  }

  #bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
  }

</style>

<body>
  <div id="parent">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>
  </div>
</body>
Copy the code

(2) the Flex 👌

<style>
  * {
    margin: 0;
    padding: 0;
  }

  html.body.#parent {
    height: 100%;
  }
  div{
    border: 1px solid # 000;
    box-sizing: border-box;
  }

  #parent {
    display: flex;
    flex-direction: column;
  }

  #top {
    height: 100px;
  }

  #bottom {
    height: 50px;
  }

  #middle {
    flex: 1;
    display: flex;
  }

  #left {
    width: 200px;
  }

  #right {
    flex: 1;
    overflow: auto;
  }
</style>

<body>
  <div id="parent">
    <div id="top">top</div>
    <div id="middle">
      <div id="left">left</div>
      <div id="right">right</div>
    </div>
    <div id="bottom">bottom</div>
  </div>
</body>
Copy the code

(3) the Grid 👌

<style>
  * {
    margin: 0;
    padding: 0;
  }

  html.body.#parent {
    height: 100%;
  }

  div {
    border: 1px solid # 000;
    box-sizing: border-box;
  }

  #parent {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 100px 1fr 50px;
    grid-template-areas: "header header"
                          "left right"
                          "footer footer";
  }

  #top {
    grid-area: header;
  }

  #bottom {
    grid-area: footer;
  }

  #left {
    grid-area: left;
  }

  #right {
    grid-area: right;
  }
</style>

<body>
  <div id="parent">
    <div id="top">top</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="bottom">bottom</div>
  </div>
</body>
Copy the code

preface

One, two column layout

1.1 The width of the left column is fixed, and the right column is adaptive

1) float + margin 👍

(2) float + margin 👎 (fix)

(3) float + overflow 👍

(4) use the table 👎

(5) the position 👍

6. The Flex 👌

All landowners Grid 👌

1.2 The left column is adaptive and the right column is fixed width

1) float + margin 👌

(2) float + overflow 👍

(3) the table 👎

(4) the position 👍

(5) the Flex 👌

6. The Grid 👌

1.3 One column expands according to the content, and the other column ADAPTS

1) float + overflow 👍

(2) the Flex 👌

(3) the Grid 👌

conclusion

Two, three column layout

2.1 Two columns have fixed width and one column is adaptive

1) float + margin 👍

(2) float + overflow 👍

(3) the position 👌

(4) the table 👎

(5) the Flex 👌

6. The Grid 👌

2.2 Fixed width on both sides, adaptive in the middle

① Twin wing layout 👍[high frequency test site ⭐]

② Grail layout 👎

The layout of the Grail

(3) the Grid 👌

(4) the Flex 👌

3. Multi-column layout

3.1 Multiple columns of equal width

1) float 👍

(2) the table 👌

(3) the Flex 👌

(4) the Grid 👌

3.2 scratchable latex

(1) the table 👍

(2) the Flex 👌

③ Flex wrap optimization 👍

(4) the Grid 👍

4. Full screen layout

(1) the position 👍

(2) the Flex 👌

(3) the Grid 👌

Related Posts

Network protocols TCP,UDP, and IP

(Tinypng image compression) solves the problem that CSDN cannot upload too large pictures

With APICloud, anyone can develop the Vangelist APP – the basics