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