The indefinite width and adaptive of the layout

Indefinite width: Refers to the setting of any width, or width of the content is determined.

Adaptive: No matter how the other elements change, it doesn't have to be changed.

Proposition: setting indefinite width and adaptive

<Divclass= "Parent">     <Divclass= "Left">          <P>Left</P>    </Div>    <Divclass= "Right">          <P>Right</P>          <P>Right</P>    </Div></Div>

Scenario 1: Float+overflow

. left{   Float:left;   width:100px;                 . Left p{width:200px;}
   margin-right:20px;             }. right{   Overflow:hidden;}

Scenario 2: Table

Layout first
. parent{   display:table;               width:100%;           Table default width is the content, the sum of the width of each column is the total width of table   table-layout:fixed;   Improve the rendering speed, realize the layout priority}.left,.right{   Display:table-cell;   Set to cell  can not be set margin}.left{   width:100 px;   padding-right:20px;}

Content first
. parent{   display:table;               width:100%;           Table default width is the content, the sum of the width of each column is table total width}.left,.right{   Display:table-cell;   Set to cell  can not be set margin}.left{   width:0.1%;   padding-right:20px;}
. Left p{
  width:200px;
}

Scenario 3: Flex

. parent{    Display:flex;}. left{    width:100 px;          . Left p{width:200px;}    margin-right:20px;}. right{    flex:1;                 Equivalent to flex:1 1 0;   The rest of the space is given right}

Additional: Multi-column variable width and adaptive

Set the width of the pattern to a consistent

The indefinite width and adaptive of the layout