1. The Holy Grail Layout
<!DOCTYPE html> <html> <head> <title>Holy Grail Layout</title> <meta charset="utf-8"> <style type="text/css"> /*Holy Grail layout*/ .container{ /* Reserve space for left and right boxes */ padding: 0 300px 0 200px; } .left,.middle,.right{ min-height: 130px; float: left; position: relative; } .left{ background: green; width: 200px; /*Negative margins move the left and right boxes to the same line as the middle box, -100% means move the size of one line to the left*/ margin-left: -100%; /*Negative values move in the opposite direction, that is, move to the left to fill padding-left*/ left: -200px; } .middle{ background-color: blue; /* fill a single line */ width: 100%; height: 1600px; } .right{ background-color: red; width: 300px; /*Negative margins move the left and right boxes to the same line as the middle box*/ margin-left: -300px; /*Negative values move in the opposite direction, that is, move to the right to fill padding-right*/ right: -300px; } </style> </head> <body> <!-- Grail Layout--> <div class="container"> <!-- The div in the middle must be written at the front, loading first --> <div class="middle">Middle flex area</div> <div class="left">left column</div> <div class="right">Right column</div> </div> </body> </html>
2. Double wing layout
<!DOCTYPE html> <html> <head> <title>Double wing layout</title> <meta charset="utf-8"> <style type="text/css"> .left,.middle,.right{ min-height: 130px; float: left; } .left{ background-color: red; width: 200px; margin-left: -100%; } .middle{ background-color: gray; width: 100%; } .right{ background-color: darkblue; width: 300px; margin-left: -300px; } .content{ margin: 0 300px 0 200px; background-color: orange; } </style> </head> <body> <div class="middle"> <div class="content">middle</div> </div> <div class="left">left</div> <div class="right">right</div> </body> </html>
3. flex layout
<!DOCTYPE html> <html> <head> <title>flex implements three-column layout</title> <meta charset="utf-8"> <style type="text/css"> .container{ min-height: 130px; display: flex; } .middle{ background-color: rgba(0,0,255,0.7); /*flex-grow defaults to 0 magnification ratio, fills the blank, */ flex-grow:1; } .left{ background-color: rgba(0,255,0,0.7); /*order defaults to 0, the smaller the order*/ order: -1; /* Item occupies space in the main axis */ flex-basis: 200px; } .right{ background-color: rgba(255,0,0,0.7); /* Item occupies space in the main axis */ flex-basis: 300px; } </style> </head> <body> <div class="container"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
4. Absolute positioning
<!DOCTYPE html> <html> <head> <title>Absolute positioning to achieve three-column layout</title> <meta charset="utf-8"> <style type="text/css"> .container{ position: relative; } .middle,.left,.right{ top: 0; height: 130px; } .middle{ background-color: red; height: 500px; margin: 0 300px 0 200px; } .left{ background-color: blue; width: 200px; position: absolute; left: 0; } .right{ background-color: green; width: 300px; position: absolute; right: 0; } </style> </head> <body> <div class="container"> <!-- The div in the middle must be written at the front, loading first --> <div class="middle">Middle flex area</div> <div class="left">left column</div> <div class="right">Right column</div> </div> </body> </html>