代码示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>三列布局:左右固定列宽，中间列自适应</title> 6 <style> 7 .float-left{ 8 background-color:red; 9 float:left; 10 width:80px; 11 height:50px; 12 border:solid 3px black; 13 padding-left:80px; 14 margin-left:150px; 15 } 16 17 .absolute{ 18 background-color:blue; 19 position:absolute; 20 width:80px; 21 height:50px; 22 border:solid 3px black; 23 padding-left: 80px; 24 margin-left:150px; 25 } 26 27 .relative{ 28 background-color:yellow; 29 position:relative; 30 width:80px; 31 height:50px; 32 border:solid 1px black; 33 padding-left: 80px; 34 margin-left:150px; 35 margin-top:2px; 36 } 37 38 .fixed{ 39 background-color:green; 40 position:fixed; 41 width:50px; 42 height:50px; 43 border:solid 3px black; 44 padding-left: 100px; 45 margin-left:55px; 46 margin-top: 2px; 47 48 } 49 50 span{ 51 background-color:#DB9395; 52 width:100px; 53 height:100px; 54 border:solid 1px black; 55 padding-left: 100px; 56 margin-left:55px; 57 } 58 </style> 59 </head> 60 <body> 61 <!--span元素的测试--> 62 <span>span</span> 63 64 <br><br> 65 66 <!--float的测试--> 67 <div style="float:left;background-color:red;">float div 1</div> 68 <div class="float-left">float div 2</div> 69 <div class="float-left">float div 3</div> 70 <div style="background-color:#76D8DD;border-bottom: solid 1px orange;">normal div1</div> 71 <div style="background-color:#76D8DD;">normal div2</div> 72 73 <br/><br/><br/><br/><br/><br/><br/> 74 75 <!--absolute的测试--> 76 <div style="position:absolute;background-color:blue;">absolute div 1</div> 77 <div class="absolute">absolute div 2</div> 78 <div class="absolute">absolute div 3</div> 79 <div style="background-color:#76D8DD;border-bottom:1px solid orange;">normal div3</div> 80 <div style="background-color:#76D8DD;">normal div4</div> 81 82 83 <br><br><br><br><br><br> 84 85 <!--relative的测试--> 86 <div style="position:relative;background-color:yellow;">relative div 1</div> 87 <div class="relative">relative div 2</div> 88 <div class="relative">relative div 3</div> 89 <div style="background-color:#76D8DD;border-bottom:1px solid orange;">normal div5</div> 90 <div style="background-color:#76D8DD;">normal div6</div> 91 92 <!--fixed的测试--> 93 <br> 94 <div style="position:fixed;background-color:green;">fixed div 1</div> 95 <br><br> 96 <div class="fixed">fixed div 2</div> 97 <div class="fixed">fixed div 3</div> 98 <div style="background-color:#76D8DD;border-bottom:1px solid coral;">normal div7</div> 99 <div style="background-color:#76D8DD;">normal div8</div> 100 101 102 </body> 103 </html>