Three-column CSS layout

Document directory

• I. Text
• Ii. Summary

I. Text

Before layout, you usually need reset CSS. The younger brother prefers kissy reset and uses it here. The code is not included. You can download it yourself to see it.

1. High layout with three columns

Html code:

<div id="wrap">    <div id="left">        <p>left</p>        <p>left</p>        <p>left</p>        <p>left</p>        <p>left</p>    </div>    <div id="center">        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>        <p>center</p>    </div>    <div id="right">        <p>right</p>        <p>right</p>        <p>right</p>    </div></div>

Css code:

#wrap{    width: 1000px;    margin: 0 auto; /*key code:*/    overflow: hidden;}#left, #center, #right{    /*key code:*/    margin-bottom: -10000px;    padding-bottom: 10000px;}#left{    background: #00FFFF;    float: left;    width: 250px;}#center{    background: #FF0000;    float: left;    width: 500px;}#right{    background: #00FF00;    float: right;    width: 250px;}

Key: overflow: hidden, combining positive and negative margins

2. use display: inline-block)

Html code:

<div class="sec">    <div class="content">        <div class="subMenuLeft">left</div>        <div class="mainBoxCenter">center</div>        <div class="infoRight">right</div>    </div></div>

Css code:

    
.sec div.content{    padding-left: 150px;    padding-right: 300px;}.sec div.subMenuLeft, .sec div.mainBoxCenter, .sec div.infoRight{    display: inline-block;    zoom: 1;    display: inline; /*fix ie<8*/}.sec div.mainBoxCenter{    width: 100%;    background: #00FFFF;}.sec div.subMenuLeft{    width: 150px;    margin-left: -150px;    background: #FF0000;}.sec div.infoRight{    width: 300px;    margin-right: -300px;    background: #00FF00;}
Key: Use display: inline-block, and then control the padding and margin. 
Explaination:
The object is presented as an inline object, but the content of the object is presented as a block object. The Inline object next to it will be presented in the same row and spaces are allowed.
However, the concept of has layout is used in IE6.0 and IE7.0. The use of display: inline-block triggers only the has layout attribute of block elements. DIV itself is a block element, so there will still be line breaks in IE <8.0.
Solution: first set the block element to inline object submission (set the attribute display: inline), and then trigger the block element layout to go to hack IE7.0-
Div {display: inline-block; zoom: 1; * display: inline ;}
3. use float &-margin)
Html code:
<div class="thr">    <div class="content">        <div class="mainBoxCenter">center</div>    </div>    <div class="subMenuLeft">left</div>    <div class="infoRight">right</div></div>
Css code:
   
.thr div.content{    width: 100%;    float: left;}.thr div.subMenuLeft, .thr div.infoRight{    float: left;}.thr div.subMenuLeft{    width: 150px;    margin-left: -100%;    background: #00FFFF;}.thr div.infoRight{    width: 200px;    margin-left: -200px;    background: #FF0000;}.thr div.mainBoxCenter{    margin-left: 150px;    margin-right: 200px;    background: #00FF00;}
Key: use floating, and then use the negative margin-left value to control the position. 
Explaination:
1. Set all three divs to float to the left.
2. Set the content width to 100%, which is full of the whole line. At this time, both left and right are squeezed to the next line.
3. Set left's margin-left:-100%; so that left is offset to the leftmost side of the screen and disappears.
4. Set the left margin and right margin of mainCenter to equal to the width of left and right to be displayed, which is equivalent to placing left and right at the specified position.
5. Set the right's margin-left value to its own width, so that the right is offset to the right of the screen.
Ii. Summary
The above layout is compatible with all mainstream browsers, including IE6 +
My personal understanding in this article is original, and the materials are from the Internet. Thank you very much!
If this article is helpful for your layout work, please feel free to give me some suggestions and seek the motivation for writing!
Mutual encouragement.
Reference: http://www.cnblogs.com/stay-foolish/archive/2013/05/19/3080200.html