div布局（持续更新）
1、
效果：
代码：
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 <meta name="viewport" content="width=device-width" /> 7 <title>首页</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 div { 15 border: 1px solid black; 16 } 17 18 #main { 19 position: relative; 20 width: 200px; 21 height: 200px; 22 } 23 24 #top-left { 25 position: absolute; 26 top: 0%; 27 width: 50%; 28 height: 90%; 29 } 30 31 #top-right { 32 position: absolute; 33 top: 0%; 34 left: 50%; 35 width: 50%; 36 height: 90%; 37 border-bottom: -1px; 38 } 39 40 #bottom { 41 margin: 0 auto; 42 position: absolute; 43 top: 90%; 44 left: 0%; 45 width: 100%; 46 height: 10% 47 } 48 </style> 49 </head> 50 51 <body> 52 <div id="main"> 53 <div id="top-left">顶部左</div> 54 <div id="top-right">顶部右</div> 55 <div id="bottom">底部</div> 56 </div> 57 </body> 58 59 </html>
