CSS Tips (2)

Objective

Recently, the interview encountered some of the use of CSS to achieve a multi-column high-level layout or fixed side width, the other side of the width of the adaptive problem, a little summary below:

First look at a topic ingenious multi-column high-level layout

Specify the following layout, the implementation of multi-column and other high-level layout, requires two columns of background color and so on.

1 <Divclass= "Container">2     <Divclass= "Left">Multi-column and other high layout left <br/> multi-column high layout left</Div> 
3 <Divclass= "Right">Multi-column and other high-layout right</Div>
4 </Div>

Method One: Use Flex layout

<Divclass= "Container">    <Divclass= "Left">Multi-column equal height layout left<BR/>Multi-column equal height layout left</Div> <Divclass= "Right">Multi-column and other high-layout right</Div></Div>

. Container {  display:flex;} . Left,.right {  Flex:1;} . Left {  background:pink;} . Right {  background:green;}

Cons: IE9 and IE9 Flex properties are not supported in the following versions

Advantages: Easy to achieve, but also easy to achieve a variety of proportions

Method Two: use a separate background color for the container div (fluid layout)

The principle is to add a relative application container to each column, nest each other, and set the background color in each container. Here you need to remind everyone how many containers you need, like the three columns we're talking about, then you need to use three containers. is as follows:

1 <DivID= "Container2">2   <DivID= "Container1">3     <DivID= "Col1">Column 1</Div>4     <DivID= "Col2">Column 2;column 2;column 2;column 2;column 2</Div>5   </Div>6 </Div>

1 //There are two columns here, so two containers are required2 #container2{3 float: Left;4 width:100%;5 background:Orange;6 position:relative;7 Overflow:Hidden;8}9 Ten #container1{ One float: Left; A width:100%; - background:Green; - position:relative; the  Right:30%;/*distance is the width of the second column, plus 2% padding*/ -} -  - #col1{ + width:66%; - float: Left; + position:relative; A  Left:32%;/*container1 container right:30%, plus internal margin 2%, it is 32%;*/ at} -  - #col2{ - width:26%; - float: Left; - position:relative; in  Left:36%;/*plus three inner margins, so it is 36%;*/ -}

Pros: Compatible with various browsers

Cons: Nesting too many div elements

Two columns, such as high layout, please poke demo, three columns, such as high layout, please poke demo;

Method Three: Offset with internal and external margins, note that the parent element is set to "Overflow:hidden;"

<DivID= "Container">  <DivID= "Left"class= "column aside">    <P>Sidebar</P>  </Div>  <DivID= "Content"class= "column section">    <P>Main content;content;content;content;content</P>  </Div>  <DivID= "Right"class= "column aside">    <P>Sidebar</P>  </Div></Div>

1 #container{2 margin:0 Auto;3 Overflow:Hidden;4 width:960px;5}6 7 . Column{8 background:#ccc;9 float: Left;Ten width:200px; One Margin-right:5px; A Margin-bottom:-99999px; - Padding-bottom:99999px; -} the  - #content{ - background:#eee; -} +  - #right{ + float: Right; A Margin-right:0; at}

Pros: Compatible with all browsers

Poke Demo

Method Four: Border imitation etc high column

<DivID= "Containerouter">  <DivID= "Container">    <DivID= "Content">; Main Content; Main Content; Main Content; Main Content; Main Content; Main Content; Main Content</Div>    <DivID= "Left">Left Sidebar</Div>    <DivID= "Right">Right Sidebar</Div>  </Div></Div>

#containerOuter{margin:0 Auto;width:960px;}#container{Background-color:#0ff;float: Left;width:520px;Border-left:220px Solid #0f0;/*the border size equals the left column width, and the color is consistent with the left column background color*/Border-right:220px Solid #f00;/*the border size equals the right column width, and the color is consistent with the right column background color*/}#left{float: Left;width:200px;Margin-left:-220px;padding:10px;position:relative;/*Test*/Border:1px solid;}#content{float: Left;width:500px;padding:10px;Margin-right:-520px;}#right{float: Right;width:200px;padding:10px;Margin-right:-220px;position:relative;}

Poke Demo

Summary : The way of implementation there are many ~ today temporarily summarize these ~ ~ To continue to add later

CSS Tips (2)