Table-cell completes the left-side, right-side, left-side, and left-side la S, and table-cell la S.

Table-cell completes the left-side, right-side, left-side, and left-side la S, and table-cell la S.
Use table-cell to complete the following la S (compatible with ie8 and later) 1. left-side fixed width-right-side adaptive

 .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>

The effect is as follows:

(Adjust the window size to test whether the window size is changed on the right)

2. right-left-side adaptive

 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>

The effect is as follows:

It is slightly different from the left-side fixed width. Although it is only a bit replacement of the fixed width, it cannot be completed directly using the floating width method on the left side.

3. Left and Right fixed width-adaptive in the middle

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

The effect is as follows: