“This is the seventh day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge 2021”.

Previous recommendations:

“Full Screen CSS Layout”

preface

Multi-column layouts

Two columns of the layout

  • The two-column layout is also a classic layout, consisting of the left and right columns. The width of one column is fixed, the width of the other column is adaptive, and the heights of the two columns are also fixed and equal.
<div class="layout">
    <div class="layout-left"></div> 
    <div class="layout-right"></div> 
</div>
Copy the code

Implemented via float/margin-legt

Float :left; margin-left; float:left; margin-left; float:left; margin-left

.layout { width: 920px; height: 880px; .layout-left { float: left; width: 300px; height: 100%; background-color: crimson; } .layout-right { margin-left: 100px; height: 100%; background-color: yellowgreen; }}Copy the code

Through Flex.

Using Flex, the code is very compact and requires only a fixed width for the left column and flex: 1 for the right column; Just make it adaptive.

.layout { display: flex; width: 920px; height: 880px; .layout-left { width: 300px; background-color: crimson; } .layout-right { flex: 1; background-color: yellowgreen; }}Copy the code

Three column layout

In a three-column layout, the two columns next to each other are of fixed width, the other is of adaptive width, and the height of each column is fixed and equal. So let me show you how it works.

<div class="layout">
  <div class="layout-left"></div>
  <div class="layout-middle"></div>
  <div class="layout-right"></div>
</div>
Copy the code

The flex implementation

As with the above, it’s very easy to write in Flex, but you can write anything in Flex.

.layout { display: flex; width: 920px; height: 880px; .layout-left { width: 100px; background-color: crimson; } .layout-middle { width: 200px; background-color: gray; } .layout-right { flex: 1; background-color: yellowgreen; }}Copy the code

Float, margin-left implementation

Of course, float and margin-left can also be implemented, but they are more cumbersome and less concise than Flex.

.layout { width: 920px; height: 880px; .layout-left { float: left; width: 100px; height: 100%; background-color: crimson; } .layout-middle { float: left; width: 200px; height: 100%; background-color: gray; } .layout-right { height: 100%; margin-left: 300px; background-color: yellowgreen; }}Copy the code

Well, that’s all for today. You are still the best today. Come on, come on, you’re the best! Come on, come on, you’re the best! Oh huo, Bye Bye!!