Structure:
1 <Divclass= "Parent">2 <Divclass= "Left">3 <P>Left</P>4 </Div>5 <Divclass= "Right">6 <P>Right</P>7 <P>Right</P>8 </Div>9 </Div>
Style:
1. Solution One: Float +margin
1 . Parent {2 Background-color:grey;3 width:300px;4 height:200px;5 6 }7 . Left {8 The float:left;/* element is out of the document stream, but the content is in the document flow * /9 width:100px;Ten Background-color:skyblue; One A } - . Right { - margin-left:110px; the Background-color:greenyellow; - } - /* Advantages: Easy to understand -Disadvantage: (1) compatibility is a bit problematic, because left has floating, right does not float, so right there will be a 3px bug, that is, two of the correct text will want to be 3px, you can add margin-right:-100px on the left, which is similar to hack
(2) also because left has a floating, right does not, so on the first <p>right</p> to clear the float, you will fall down, that is, in the lower horizontal line
. Right p:first-child::before{
Clear:both;
Content: "";
Display:block;
height:0;
Overflow:hidden;
Visibility:hidden;
}*/
2. Solution Two: float+ margin + fix (improvement of the above method)
Structure:
<Divclass= "Parent"> <Divclass= "Left"> <P>Left</P> </Div> <Divclass= "Right-fix"> <Divclass= "Right"> <P>Right</P> <P>Right</P> </Div> </Div> </Div>
Style:
1 . Parent {2 Background-color:grey;3 width:300px;4 height:200px;5 6 }7 . Left {8 The float:left;/* element is out of the document stream, but the content is in the document flow * /9 width:100px;Ten Background-color:skyblue; One position:relative;/* Raise the left level * / A } - . right-fix { - Float:right; the width:100%; - margin-left: -100px; - } - . Right { + margin-left:110px; - Background-color:greenyellow; + } A p { at margin:0; -}
3. Solution Three: float+ overflow
Structure is the topmost structure.
Style:
. parent { Background-color:grey; width:300px; height:200px; } . The left { float:left;/* element is out of the document flow, but the content is in the document flow */ width:100px; Background-color:skyblue; margin-right:10px; } . Right { overflow:hidden;/* triggers BFC mode (block formating context block-level formatted text), resulting in the effect that the contents of the container in the BFC mode are isolated from the outside world, Outside content such as: floating element is not affect the contents of BFC */ background-color:greenyellow; } /*IE6 not supported */
4. Solution Four: Table+table-cell (two columns of natural high)
Structure: top-most structure
Style:
. parent { Background-color:grey; width:300px; height:200px; display:table; Table-layout:fixed;/* accelerates the rendering of the table, implementing the layout First */ } . Left { Display:table-cell; width:100px; Background-color:skyblue; border-right:10px solid transparent; background-clip:padding-box;/* set the spacing between columns */ } . Right { Display:table-cell; Background-color:greenyellow; }
5. Solution Five: flex+ flex:1 (two columns of natural high)
Structure: top-most structure
Style:
. parent { Background-color:grey; width:300px; height:200px; Display:flex; } . Left { width:100px; Background-color:skyblue; margin-right:10px; } . Right { flex:1;/*.right adapts to all remaining parts */ background-color:greenyellow; }
/*flex is the CSS3 new content, low compatibility.
Flex adapts to content, so performance is a problem, usually with flex as a small-scale layout, rather than a large-scale layout, where the content in right is not too complex, too much, and too much affects flex performance */
Layout-Two column layout (one column fixed width, one column adaptive)