多列CSS问题

我已经使用多列CSS来显示我的各种UL列表成三列。以下是我已经使用的css多列CSS问题

.columnsmulti { 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    -moz-column-rule: 0px double #666; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    -webkit-column-rule: 0px double #666; 
    column-count: 3; 
    column-gap: 10px; 
    column-rule: 0px double #666; 
}

这是html代码。

<div> 
    <div class="box_middle"> 
    <div class="box_top"></div> 
    <h2><span class="arr_lft"><img src="images/arrow-new.png" alt="" /></span>5 Towns<span class="arr_rht"><img src="images/arrow-new.png" alt="" /></span></h2> 
    <ul> 
     <a class="thumb" href="#"> 
     <li class="blue"> 
     <div class="sec_lft"><img src="#" height="28px" width="31px"></div> 
     <div class="sec_mid">Seasons - Lawrence <span class="special_red">Specials Not Updated</span></div> 
     <div class="sec_rht"> 
      <div class="top_badge"></div> 
      0 </div> 
     </li> 
     </a> <a class="thumb" href="#"> 
     <li > 
     <div class="sec_lft"><img src="brachs-logo.jpg" height="28px" width="31px"></div> 
     <div class="sec_mid">Brach's In Lawrence <span class="special_red">Specials Not Updated</span></div> 
     <div class="sec_rht"> 2 </div> 
     </li> 
     </a> <a class="thumb" href="#"> 
     <li > 
     <div class="sec_lft"><img src="gourmetglattlogo.jpg" height="28px" width="31px"></div> 
     <div class="sec_mid">Gourmet Glatt Emporium <span class="special_red">Specials Not Updated</span></div> 
     <div class="sec_rht"> 1 </div> 
     </li> 
     </a> 
    </ul> 
    <div class="box_bot"></div> 
    </div> 
</div>

上面的div是一组。可能有任何数量的组。这些集合应该正确分配到三列中。

问题是列表没有正确分配到三列。每个页面刷新看起来都不相同。有些列表有时不显示。我怎样才能解决这个问题？

来源

2012-07-13 designersvsoft

嘿，现在这是工作检查到此http://tinkerbin.com/udxy8xHO – 2012-07-13 10:45:31

问题是内容。请看我更新的问题。 – designersvsoft 2012-07-13 10:55:30

我不认为多栏CSS是真的设计来做你想做的事情。更多的是在报纸/杂志风格的多列上显示简单的文字段落。 – 2012-07-13 11:04:57