横向布局情况下，页面左右自适应文章内容的问题

自从平板出现后，页面左右布局的越来越多。尤其是看文章，估计都觉得翻书的体验很好用。css也适应变化，出现了许多新的属性（或者是之前就有，本人木有用过。。。）

需求

首先我们分析下大概的需求：

• 1
  

  <div>

• 2
  

      <p>....</p>

• 3
  

  </div>

p标签中是详细内容，这里的内容可能会比较多，div就是其容器了。比如这个div宽度是320，高度是从头到底部，然后，就是在页面内容比较多的时候，在右面第二列显示余下内容。。。

这个需求在以前是很奇怪的，但在平板上这个需求就看起来很正常了。

css

我们找找对应的一些css写法：

column-count：这是指布局分几列；
column-fill：每一列的填充方式，auto是填满一列，再填下一列，balance是平均填充，就是没列的高度差不多一样。

实现

好了，知道了css如何使用，我们就可以动态控制页面的css来实现。实现方案呢，当然是先判断p标签的高度是不是高于容器div，然后。。。废话太多了，上代码吧(jquery)：

• 1
  

  function Auto(){

• 2
  

      var width=320;

• 3
  

       if($("div>p").height()>$("div").height())

• 4
  

       {

• 5
  

            var count=parseInt($(".description").css("column-count"));

• 6
  

            if(isNaN(count))count=1;

• 7
  

            count++;

• 8
  

            $("div").width(320*count);

• 9
  

            $("div").css("column-count",count);

• 10
  

            $("div").css("-webkit-column-count",count);

• 11
  

            $("div").css("-moz-column-count",count);

• 12
  

            $("div").css("column-fill","auto");

• 13
  

            if(count<3){

• 14
  

                    Auto();

• 15
  

            }                                

• 16
  

       }

• 17
  

       return false;

• }

这是一个递归了，当然这里谨慎的设置了最多只支持三次递归。