使用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>

效果如下：