Method one: floating method
<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>CSS -- float</title> <style type="text/ CSS "> body {margin: 0; padding: 0; } .container{ overflow: auto; } .left{ width: 200px; height: 200px; background: red; float: left; } .middle{ height: 200px; background: yellow; } .right{ width: 200px; height: 200px; background: blue; float: right; } </style> </head> <body> <div class="container"> <div class="left"> </div> <div class="right"> </div> <div Class ="middle"> Middle column </div> </div> </body> </ HTML >Copy the codeOptimized version:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>CSS -- float</title> <style type="text/ CSS "> body {margin: 0; padding: 0; } .container > div{ float: left; height: 200px; } .left{ width: 200px; background: red; margin-left: -100%; } .middle{ width: 100%; background: yellow; box-sizing: border-box; padding: 0 200px; } .right{ width: 200px; background: blue; margin-left: -200px; } </style> </head> <body> <div class="container"> <div class="middle"> Middle column </div> <div class="left"> left column </div> <div Class ="right"> </div> </div> </body> </ HTML >Copy the codeMethod two: absolute positioning method
<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>CSS -- Position</title> <style type="text/ CSS "> body {margin: 0; padding: 0; } .container { position: relative; } .left { width: 200px; height: 200px; background: red; position: absolute; top: 0; left: 0; } .middle { height: 200px; background: yellow; margin-left: 200px; } .right { width: 200px; height: 200px; background: blue; position: absolute; top: 0; right: 0; } </style> </head> <body> <div class="container"> <div class="middle"> Middle column </div> <div class="left"> left column </div> <div Class ="right"> </div> </div> </body> </ HTML >Copy the codeMethod 3: Flex
<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> Flex</title> <style type="text/ CSS "> body {margin: 0; padding: 0; } .container { display: flex; } .left { width: 200px; height: 200px; background: red; } .middle { height: 200px; background: yellow; flex: auto; } .right { width: 200px; height: 200px; background: blue; } </style> </head> <body> <div class="container"> <div class="left"> left column </div> <div class="middle"> Middle column </div> <div Class ="right"> </div> </div> </body> </ HTML >Copy the codeMethod 4: Grid
<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> Grid</title> <style type="text/ CSS "> body {margin: 0; padding: 0; } .container { height: 200px; display: grid; grid-template-columns: 200px 1fr 200px; } .left { background: red; } .middle { background: yellow; } .right { background: blue; } </style> </head> <body> <div class="container"> <div class="left"> </div> <div class="right"> </div> <div Class ="middle"> Middle column </div> </div> </body> </ HTML >Copy the codeRefer to the link
Don’t know the layout of the Grail? 5 ways to teach and meet
Four ways to achieve — three column layout (Holy Grail layout, twin wings layout)
There are three methods to achieve a three-column CSS layout