1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>上中下一栏式布局</title> 6 <style type="text/css"> 7 body{ 8 /*解决顶部的空白*/ 9 margin: 0; 10 } 11 .wrap{ 12 width: 900px; 13 margin: 0 auto; 14 text-align: center; 15 } 16 #header{ 17 height: 100px; 18 background: #6cf; 19 } 20 #main{ 21 height: 500px; 22 background: #ccffff; 23 } 24 #footer{ 25 height: 80px; 26 background: #99ccff; 27 } 28 </style> 29 </head> 30 <body> 31 <header id="header" class="wrap">#header</header> 32 <section id="main" class="wrap">#main</section> 33 <footer id="footer" class="wrap">#footer</footer> 34 </body> 35 </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>左右两栏式布局一</title> <style type="text/css"> .wrap{ margin: 0 auto; width: 80%; } #left{ width: 200px; height: 500px; background: #CCFFFF; float: left; } #right{ height: 500px; background: #ffcccc; /*保证互不压盖，连续平铺*/ margin-left: 200px; } </style> </head> <body> <div class="wrap"> <aside id="left">#left</aside> <section id="right">#right</section> </div> <!-- 作者：offline 时间：2018-11-12 描述： 方法一：混合浮动 + 普通流*/ --> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>左右两栏式布局一</title> <style type="text/css"> .wrap{ margin: 0 auto; /*可以实现自适应*/ width: 900px; /*清除浮动*/ overflow: hidden; } #left{ width: 200px; height: 500px; background: #CCFFFF; float: left; } #right{ width: 700px; height: 500px; background: #ffcccc; float:left } </style> </head> <body> <div class="wrap"> <aside id="left">#left</aside> <section id="right">#right</section> </div> <!-- 作者：offline 时间：2018-11-12 描述： 方法一：纯浮动 */ --> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>左右两栏式布局一</title> <style type="text/css"> .wrap{ margin: 0 auto; /*可以实现自适应*/ width: 900px; position: relative; } #left{ width: 200px; height: 500px; background: #CCFFFF; position: absolute; top: 0; left: 0; } #right{ width: 700px; height: 500px; background: #ffcccc; position: absolute; top: 0; right: 0; } </style> </head> <body> <div class="wrap"> <aside id="left">#left</aside> <section id="right">#right</section> </div> <!-- 作者：offline 时间：2018-11-12 描述： 方法三：绝对定位实现的*/ --> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>左右两栏加页眉页脚</title> <style type="text/css"> .wrap{ margin: 0 auto; width:900px } #header{ height: 100px; background: #66ccff; } #main{ height: 500px; background: #ffcccc; } #footer{ height: 80px; background: #99ccff; } #left{ width: 200px; height: 100%; float: left; background: #CCFFFF; } #right{ width: 700px; height: 100%; float: right; } </style> </head> <body> <header id="header" class="wrap">#header</header> <section id="main" class="wrap"> <aside id="left">#left</aside> <div id="right">#right</div> </section> <footer id="footer" class="wrap">#footer</footer> </body> </html>
原文：https://www.cnblogs.com/xy-online/p/9949395.html
