纯CSS三列布局

一、正文

布局前，通常需要reset CSS，小弟深深喜欢kissy reset，在这里也使用它。至于代码就不附了，各位可以自己下载来参透参透。

1.三列等高布局

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,正内边距和负外边距结合

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:

[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:使用display:inline-block，然后控制padding和margin [/code]
explaination:
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
　　但在IE6.0以及IE7.0是使用了一个has layout的概念。使用display：inline-block仅仅触发了块状元素的has layout属性。而DIV本身就是块状元素，所以在IE<8.0 下依然会出现换行的情况。
　　解决方案：先将块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout去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:

[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:利用浮动，再通过负的margin-left值控制位置 [/code]
explaination:
1.设置三个div全部向左浮动
2.设置content的宽度为100%，充满整行，此时left和right都被挤到下一行
3.设置left的margin-left:-100%;这样left偏移到屏幕的最左方并消失
4.设置mainCenter的左外边距以及右外边距分别等于要显示的left和right的宽度，相当于留出位置放置left和right，此时会看到left出现了
5.设置right的margin-left值为自身的宽度，这样right便偏移到屏幕的右侧

二、总结

以上布局均兼容所有主流浏览器，包括IE6+
文章内个人理解为原创，资料出自网络，对此衷心表示感谢！
如果这篇文章对你的布局工作有帮助，烦请点一点推荐，求写作动力！
共勉。

引用：/article/5640673.html