<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>三列布局:左右固定列宽，中间列自适应</title>

     <style>

         .float-left{

             background-color:red;

             float:left;

             width:80px;

             height:50px;

             border:solid 3px black;

             padding-left:80px;

             margin-left:150px;

         }

         .absolute{

             background-color:blue;

             position:absolute;

             width:80px;

             height:50px;

             border:solid 3px black;

             padding-left: 80px;

             margin-left:150px;

         }

         .relative{

             background-color:yellow;

             position:relative;

             width:80px;

             height:50px;

             border:solid 1px black;

             padding-left: 80px;

             margin-left:150px;

             margin-top:2px;

         }

         .fixed{

             background-color:green;

             position:fixed;

             width:50px;

             height:50px;

             border:solid 3px black;

             padding-left: 100px;

             margin-left:55px;

             margin-top: 2px;

         }

         span{

             background-color:#DB9395;

             width:100px;

             height:100px;

             border:solid 1px black;

             padding-left: 100px;

             margin-left:55px;

         }

     </style>

 </head>

 <body>

     <!--span元素的测试-->

     <span>span</span>

     <br><br>

     <!--float的测试-->

     <div style="float:left;background-color:red;">float div 1</div>

     <div class="float-left">float div 2</div>

     <div class="float-left">float div 3</div>

     <div style="background-color:#76D8DD;border-bottom: solid 1px orange;">normal div1</div>

     <div style="background-color:#76D8DD;">normal div2</div>

     <br/><br/><br/><br/><br/><br/><br/>

     <!--absolute的测试-->

     <div style="position:absolute;background-color:blue;">absolute div 1</div>

     <div class="absolute">absolute div 2</div>

     <div class="absolute">absolute div 3</div>

     <div style="background-color:#76D8DD;border-bottom:1px solid orange;">normal div3</div>

     <div style="background-color:#76D8DD;">normal div4</div>

      <br><br><br><br><br><br>

     <!--relative的测试-->

     <div style="position:relative;background-color:yellow;">relative div 1</div>

     <div class="relative">relative div 2</div>

     <div class="relative">relative div 3</div>

     <div style="background-color:#76D8DD;border-bottom:1px solid orange;">normal div5</div>

     <div style="background-color:#76D8DD;">normal div6</div>

    <!--fixed的测试-->

     <br>

     <div style="position:fixed;background-color:green;">fixed div 1</div>

     <br><br>

     <div class="fixed">fixed div 2</div>

     <div class="fixed">fixed div 3</div>

     <div style="background-color:#76D8DD;border-bottom:1px solid coral;">normal div7</div>

     <div style="background-color:#76D8DD;">normal div8</div>

 </body>

 </html>