1.多列等高布局

一、问题

由于浮动元素的高度一般由里面的内容决定导致，有背景色的元素高度不同

 

一、解决方法

1、使用table布局

2、使用背景图background平铺

.col{

background:url(xxx.xxx) repeat-y left top;

}

3、方法三

<div id="container">
  <div class="col">
    .....
  </div>
  <div class="col">
    .....
  </div>
  <div class="col">
    .....
  </div>
</div>

第一步:

#container{
   width:100%;
}
.col{
   width:33.33%;
   float:left;
}

 

第二步:padding-bottom:-500px;增加.col高度

.col{
   width:33.33%;
   float:left;

   padding-bottom:-500px;
}

 

第三步:margin-bottom:-500px;恢复.col原高度，overflow:hidden;让容器#container高度等于.col高度，并将超过容器#container部分裁剪。

#container{
   width:100%;
   overflow:hidden;

}

.col{
   width:33.33%;
   float:left;

   padding-bottom:-500px;
   margin-bottom:-500px;
}