0

複数列の CSS を使用して、さまざまな ul リストを 3 つの列に表示しました。以下は私が使用した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は1セットです。何セットあっても構いません。セットは 3 つの列に適切に分散する必要があります。

問題は、リストが 3 つの列に適切に分散されていないことです。ページを更新するたびに表示が異なります。一部のリストが表示されないことがあります。どうすればこれを修正できますか?

4

2 に答える 2

0

tablenot列を使用します。

テーブルは、すべてのプラットフォームと表示タイプにわたって信頼性と堅牢性があり、十分に劣化します。

@ billy-moatが示唆しているように、列は雑誌/新聞タイプのレイアウト用であり、いずれの場合もすべてのブラウザでサポートされているわけではありません。

ここでの問題は、リストエントリ内に列を埋め込もうとしていることです。

于 2012-07-13T11:15:40.697 に答える