最终效果图如下：
查看demo
这是一篇关于多栏布局的探讨，是一个很好的技术性布局，其中涉及的问题很多，有初级的也有高级的技巧，相信你看完后肯定会受益匪浅。 先说下要求： 灰色区域为510px，要求三栏，左右两栏必须紧靠，不能留有空隙。
Html代码为：
<div>
<ul>
<li><a href="#"><img src="p_w_picpaths/1.jpg" /><b>你好</b></a></li>
<li><a href="#"><img src="p_w_picpaths/2.jpg" /><b>你好</b></a></li>
<li><a href="#"><img src="p_w_picpaths/3.jpg" /><b>你好</b></a></li>
<li><a href="#"><img src="p_w_picpaths/4.jpg" /><b>你好</b></a></li>
<li><a href="#"><img src="p_w_picpaths/5.jpg" /><b>你好</b></a></li>
<li><a href="#"><img src="p_w_picpaths/6.jpg" /><b>你好</b></a></li>
</ul>
</div>
Css代码为：
*{
margin:0;
padding:0;
}
body{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
a{
text-decoration:none;
color:#666;
}
a img{
border:none;
}
div{
margin:0 auto;
width:510px;
text-align:left;
background:#CCC;
}
ul{
overflow:hidden;
_height:1%;
margin-left:-15px;
}
li{
float:left;
display:inline;
margin:20px 0 20px 15px;
width:160px;
}
b{
width:160px;
display:block;
text-align:center;
}
第一个*的是css重置；
第二个body的text-align:center是让ie下实现水平居中，
第三个 a及a img主要是除掉链接的下划线及链接图片的border
第四个div的margin：0 auto；width：510px主要是实现火狐的水平居中
接下来的下面再仔细探讨：
先说第一种方案margin negative，即负margin：
这个方法的好处是不用单独设置第一个或最后一个的margin或padding为0。
现在我们设置li为左浮动，宽度为160px，margin为20px 0 20px 15px;即上下为20px，左边为15px，右边为0；这样加起来的宽度是525px，超过了510px。不用急，现在轮到我们的负margin大显身手了。接下来我们设置ul的margin-left:-15px;这样一来刚好达到了我们的要求。当然如果设置li是右margin的话，同样设置ul的margin-right:-15px。
可能现在你有点晕乎。不过别放弃哦，你可以测试下，下面的你就会明白
下面是运用到的css代码：
ul{ margin-left:-15px;}
li{
float:left;
display:inline;
margin:20px 0 20px 15px;
width:160px;
}
达到了这种初步的效果（火狐的效果）
接下来我们说说这里可能或已经产生的问题或bug
第一个iebug当然是margin加倍的，所以我们设置float为left的同时，设置了display:inline;
第二个问题是可能灰色的背景不显示出来，为了使灰色背景显示，我们要清除浮动。 即我们对ul设置了overflow:hidden;及_height:1%（这条是兼容ie6）来清除其子元素的浮动。 （当然清楚浮动的方法有很多种，其他出名的就是clear:both及.clearfix方法了）
第三个问题是我们想要的上下margin合并取最大值的情况没有发生，这是因为我们设置了li的浮动，如果是标准的文档流的话，上一个元素的margin-bottom 会与下一个元素的margin-top发生合并并取最大值。
如下图这个中间的margin为40px，这是我们不想要的结果（后面我们会修改css使其呈现20px的距离）
第四个问题是防范未然，如果这个div的左边还有其他的div那么我建议你对li设置margin为右边的，ul的负margin同样也是右边，反之如果这个div的右边有其他div，那么请设置左边的，因为ie6可能会因为margin而撑开内容发生混乱。
第五个是现在存在的bug，请看ie6 7的效果：
下面的margin-bottom的20px没有了(请注意不是我截图的问题呵呵).而ie8和火狐一样是有这个margin-bottom的。 下面我们修改css来解决这个bug，顺便解决上面说到的40px距离： 其实很简单只要对ul添加padding-bottom:20px;对li的margin进行改变为：margin:20px 0 0 15px;即设置margin-bottom为0了 那么现在的ul及li的css就是：
ul{
overflow:hidden;
_height:1%;
margin-left:-15px;
padding-bottom:20px;
}
li{
float:left;
display:inline;
margin:20px 0 0 15px;
width:160px;
}
这样我们得到了兼容火狐及ie的最上面的效果图
第二种方案：
对比第一种方案，第二种方案就比较简单了，不用那么精心设计ul的负margin了，
直接通过jquery来选择第三栏的元素设置其margin为0
$(function(){
$('li:nth-child(3n)').css({"margin-right":"0"})
})
代码中除掉ul的负margin即可，而且不用担心会引起其他元素的混乱。
