正、负外边距这个方法很实用，也很神奇，为什么说它很神奇呢，先来看一个问题吧，如下图：


 
 像这样的要想右边与左边高度一样，如下图：


要怎么做呢？下面我来一一解释吧，
首先，看html代码：
   <div class=main>                    //此层是用来做居中用的
              <div class=left>           //左边的层
                   <p>内容一</p>
                      <p>内容一</p>
                      <p>内容一</p>
                      <p>内容一</p>
                      <p>内容一</p>
                      <p>内容一</p>
                      <p>内容一</p>
              </div>
            
     <div class=right>                 //右边的层
                   <p>内容二</p>
                      <p>内容二</p>
              </div>
            </div>
接着是，css代码：
 *{ margin:0; padding:0;}            //重置标签
.main{ margin:20px auto; background:#F00; width:600px;}      //设置main居中，宽度600像素，背景为红色；
.left{ width:300px; background:#0F0; float:left;}                       //设置left层背景为绿色，宽度300像素，左浮动；
.right{ width:290px; margin-left:10px; background:#0FF; float:left; display:inline;}    //设置right层，宽度290像素，背景为深色，也左浮动，并且左边距为10像素， 注：元素为块状，且左浮动与设置了左边距的话在ie6会出现双边距，所以我用了display：inline来解决这个问题；
   
/*注意此处的代码是核心*/
.main{  overflow:hidden;}             //把多余的隐藏，正、负外边距必用此属性；
.left,.right{ margin-bottom:-10000px; padding-bottom:10000px;}     //设置它们的正、负外边距为一个较大的数。
       好了，这样定义后，就能实现第2张图所示效果了，由此看，这个方法是不是很神奇呀，呵呵！
本人出自 我的博客：http://t93240.blog.
      不好意思插入图片我没找到 所以就请各位把代码复制上去 看效果在根据效果看文字解释 抱歉

[ 本帖最后由 t932400 于 2011-10-8 23:16 编辑 ]

自己给自己先顶个