Layout-Two column layout (one column fixed width, one column adaptive)

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)