1.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>绝对定位布局</title> 6 <style type="text/css"> 7 .wrap div{ 8 position: absolute; 9 min-height: 200px; 10 } 11 .left{ 12 left: 0; 13 width: 300px; 14 background: red; 15 } 16 .right{ 17 right: 0; 18 width: 300px; 19 background: blue; 20 } 21 .center{ 22 left: 300px; 23 right: 300px; 24 background: pink; 25 } 26 27 </style> 28 </head> 29 <body> 30 <div class="wrap"> 31 <div class="left">left</div> 32 <div class="center">绝对定位布局</div> 33 <div class="right">right</div> 34 </div> 35 </body> 36 </html>
Results are as follows:
