0

我使用多列 css 将我的各种 ul 列表显示为三列。以下是我用过的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是一组。可以有任意数量的集合。这些集合应正确分布到三列中。

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

4

2 回答 2

0

使用table非列。

表格在所有平台和显示类型上都是可靠和健壮的，并且可以很好地降级。

正如@billy-moat 所建议的那样，列用于杂志/报纸类型的布局，并且在任何情况下都不受所有浏览器的支持。

这里的问题是您试图在列表条目中嵌入列。

于 2012-07-13T11:15:40.697 回答
0

如前所述，您的代码中有一些错误。为此，您仍然可以使用列，但首先，请阅读更多关于它们的信息（例如，此处）。

于 2018-02-22T11:21:27.607 回答