多列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