Two-column layout 5-1

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .left{ background:#CCC; width:200px; float:left; } .right{ background:pink; margin-left:200px; width:auto } </style> </head> <body> <div class='outer'> <div class='left'>12</div> <div class='right'>34</div> </div> </body> </html>Copy the code

Two-column layout 5-2

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .left{ background:#CCC; width:200px; float:left; } .right{ background:pink; overflow:hidden } </style> </head> <body> <div class='outer'> <div class='left'>12</div> <div class='right'>34</div> </div> </body> </html>Copy the code

Two-column layout 5-3

flex

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .outer{ display:flex; } .left{ background:#CCC; width:200px; } .right{ background:pink; flex:1 } </style> </head> <body> <div class='outer'> <div class='left'>12</div> <div class='right'>34</div> </div> </body> </html>Copy the code

Two-column layout 5-4

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .outer{ position:relative; } .left{ background:#CCC; position:absolute; width:200px; } .right{ background:gold; margin-left:200px; } </style> </head> <body> <div class='outer'> <div class='left'>12</div> <div class='right'>34</div> </div> </body> </html>Copy the code

Two-column layout 5-5

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .outer{ position:relative; } .left{ background:#CCC; width:200px; } .right{ position:absolute; background:gold; top:0; right:0; bottom:0; left:200px; } </style> </head> <body> <div class='outer'> <div class='left'>12</div> <div class='right'>34</div> </div> </body> </html>Copy the code

Three-column layout 5-1

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .outer{ position:relative; } .left{ position:absolute; background:#CCC; width:20px; } .right{ position:absolute; background:gold; width:80px; top:0; right:0; } .center{ background:tomato; margin-left:20px; margin-right:80px; } </style> </head> <body> <div class='outer'> <div class='left'>1</div> <div class='center'>2</div> <div class='right'>3</div> </div> </body> </html>Copy the code

Three-column layout 5-2

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .outer{ display:flex; } .left{ background:#CCC; width:20px; } .right{ background:gold; width:80px; } .center{ background:tomato; flex:1; } </style> </head> <body> <div class='outer'> <div class='left'>1</div> <div class='center'>2</div> <div class='right'>3</div> </div> </body> </html>Copy the code

Three-column layout 5-3

The middle column must go last

  • Because the float is out of the flow of the document, the middle column must be placed at the very end
  • If text is present, the layout will be confused, resulting in poor scalability
  • This is due to the layout effects of float
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .outer{ } .left{ background:#CCC; float:left; width:20px; } .right{ background:gold; float:right; width:70px; } .center{ background:tomato; margin-left:20px; margin-right:70px; } </style> </head> <body> <div class='outer'> <div class='left'>1</div> <div class='right'>3</div> <div class='center'>2</div> </div> </body> </html>Copy the code

Three-column layout 5-4

The holy grail layout

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .outer{ padding-left:50px; padding-right:60px; } .left{ background:pink; left:-50px; float:left; margin-left:-100%; position:relative; width:50px; } .right{ background:gold; float:right; left:60px; position:relative; margin-left:-60px; width:60px; } .center{ background:tomato; width:100%; float:left; } </style> </head> <body> <div class='outer'> <div class='center'>2</div> <div class='left'>1</div> <div class='right'>3</div> </div> </body> </html>Copy the code

Three-column layout 5-5

Double wing layout

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .center,.left,.right{ float:left; } .center{ background: #ccc; width:100%; } .inner{ margin: 0 100px; } .left{ width:100px; background: pink; margin-left:-100%; } .right{ width:100px; background: tomato; margin-left: -100px; } </style> </head> <body> <div class='outer'> <div class="center"> <div class="inner">inner</div> </div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>Copy the code