table-cell完成左側定寬，右側定寬及左右定寬等布局，table-cell布局

table-cell完成左側定寬，右側定寬及左右定寬等布局，table-cell布局
使用table-cell完成以下幾種布局（ie8及以上相容）1、左側定寬-右側自適應

 .left{            width: 300px;            height: 500px;            border: 1px solid;            float: left;      }.right{            width: 10000px;            height: 500px;            display: table-cell;            border: 1px solid;      }    </style><div class="left"></div><div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolore est et itaque nesciunt nobis officia omnis optio similique vitae. Cupiditate eum exercitationem harum id iusto maiores quaerat reprehenderit sint.</div>

效果如下：

（調整視窗大小，來測試右側是否根據視窗大小改變）

2、右側定寬-左側自適應

 1 <style> 2         .right{ 3             width: 200px; 4             height: 500px; 5             border: 1px solid; 6             display: table-cell; 7         } 8         .left{ 9             height: 500px;10             border: 1px solid;11             display: table-cell;12         }13         .parent{14             display: table;15             table-layout: fixed;16             width: 100%;17         }18 </style>19 20 <div class="parent">21     <div class="left">22             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam, assumenda dolores eaque, fugiat illo, in inventore itaque magni nemo nisi nulla obcaecati quaerat totam unde voluptatem voluptatum. Amet, totam.23     </div>24     <div class="right"></div>25 </div>

效果如下：

與左側定寬稍有不同，雖然只是定寬的位置換了，但是不能直接使用浮動像左側定寬那種方式完成。

3、左右定寬-中間自適應

<style>       .parent{           display: table;           table-layout: fixed;           width: 100%;       }        div{            border: 1px solid;        }        .left,.right,.center{            display: table-cell;        }        .left{            width: 100px;            height: 200px;        }        .right{            width: 100px;            height: 200px;        }</style> <div class="parent">      <div class="left"></div>        <div class="center">       　　Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet delectus ducimus ea eos eum, libero modi quia, soluta temporibus unde, 
　　　　　　ut. Aliquam, dolorem ipsam porro quae quisquam saepe vitae!        </div>      <div class="right"></div></div>

效果如下：