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