One column, multiple column widths, and one column of adaptive layouts for multiple column layouts

Proposition:

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

Problem one: A fixed width and a list of adaptive

Scenario 1:

. left{   Float:left;   width:100 px;}. right{   margin-left:120 px;}

Disadvantage: The 1.ie6 will produce a 3px bug, that is, the text in right will be indented to 3px. Solution:. left{margin-right:-100px;}

2. If you add a clear float on right, it will fall to the next line.

Improvement Program :

//html
<Divclass= "Parent">     <Divclass= "Left">          <P>Left</P>    </Div>    <Divclass= "Right-fix">        <Divclass= "Right">            <P>Right</P>            <P>Right</P>         </Div>    </Div></Div>
Style

. left{   Float:left;   width:100 px;
   position:relative;    Raise left Level}

. right-fix{
   Float:right;
   width:100%;
   margin-left:100px;
}

. right{margin-left:120 px;}

Pros: Good compatibility

Cons: Complex structure

Scenario 2:

. left{   Float:left;   width:100 px;
   margin-right:20px}.right{   Overflow:hidden;          Trigger BFC Mode}

Bfc:block formating Contact Quick format. Isolated from outside format

Cons: IE6 not supported

Scenario 3:

. parent{   display:table;               width:100%;           Table default width is subject to content, and 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;}

Scenario 4:

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

Cons: 1. There are compatibility issues in the low-version browser;

2. Because flex adjusts the width according to the content, the possibility can be problematic

Note: Try to use flex only in less complex places

Problem one: Multi-column fixed width and one-column adaptive

In general, you simply write a fixed-width column in the same format, using the same style

Summary: Pay attention to compatibility, and grasp the characteristics of elements.

One column, multiple column widths, and one column of adaptive layouts for multiple column layouts