两行三列
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>两行三列布局</title> <style> html, body { margin: 0; } header { height: 100px; background-color: lightblue; } #container { height: 500px; background-color: lightgreen; } nav { float: left; width: 150px; background-color: lightyellow; height: 100%; } aside { float: right; width: 100px; background-color: orange; height: 100%; } article { overflow: hidden; background-color: lightcoral; height: 100%; } </style> </head> <body> <header></header> <divid="container"> <nav></nav> <aside></aside> <article></article> </div> </body> </html>
三行两列
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>三行两列布局</title> <style> html, body { margin: 0; } header { height: 100px; background-color: lightblue; } #container { height: 500px; background-color: lightgreen; } footer { height: 100px; background-color: lightslategray; } nav { float: left; width: 150px; background-color: lightyellow; height: 100%; } article { /*margin-left: 150px;*/overflow: hidden; background-color: lightcoral; height: 100%; } </style> </head> <body> <header></header> <divid="container"> <nav></nav> <article></article> </div> <footer></footer> </body> </html>
