如何实现多栏响应式布局

1.想要实现的布局的效果：http://demos.clientapprove.com/RL_Home_FallHoliday/0704/iconic.html

2.实现的思路：

   思路1：对于每一张个具体的img图片区域：把图片的宽度设置为百分比，然后对每个区域都采用浮动定位

   如：

     .imgArea {

　　　　float:left;

           width:30%;      

     }

   思路2：对于每一个具体的img图片区域：把图片的宽度设置为百分比，然后对每个区域设置为绝对定位，用margin-left值调整每一个图片间的间距

     .imgArea {

         position:absolute;

         width:33%

   }

     .imgArea-col1{

     　　 left:0

  　　}

  .imgArea-col2 {

        left:33.333% 

     }

  .imgArea-col3 {

　　left:66.66666666%

｝

 

   思路4：

     imgArea {

         display:inline-block;

        width:30%;

       poisition:relative;

    }

     这样就可以对内部的元素设置绝对定位，可以做鼠标hovering切换的动画；

      常见观点小结：不对元素设置宽高，使得元素的高度自动向下撑，这样就不会出现过高或者过低打架的情形