Table-cell complete the left fixed width, the right width and width and so on layout

Use Table-cell to complete the following layouts (compatible with IE8 and above) 1, left fixed width-right 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:

(Resize the window to test whether the right side changes depending on the window size)

2. Right fixed width-left adaptive

1<style>2 . right{3 width:200px;4 height:500px;5 border:1px solid;6display:table-cell;7         }8 . left{9 height:500px;Ten border:1px solid; Onedisplay:table-cell; A         } - . parent{ - display:table; thetable-layout:fixed; -width:100%; -         } -</style> +  -<div class= "Parent" > +<div class= "Left" > ALorem ipsum dolor sit amet, consectetur adipisicing elit. Amet Aperiam, Assumenda Dolores Eaque, Fugiat Illo,inchinventore itaque Magni nemo nisi nulla obcaecati quaerat totam unde voluptatem voluptatum. Amet, Totam. at</div> -<div class= "right" ></div> -</div>

The effect is as follows:

And the left side of the fixed width slightly different, although only a fixed width of the position to change, but can not directly use the floating like the left width of the way to complete.

3, about fixed width-intermediate adaptive

 <style>-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" & Gt  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:

Table-cell complete the left fixed width, the right width and width and so on layout