Question

我使用多列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是一套。可能有任何数量的集合。这些集应该正确分配到三列。

问题是列表没有正确分配到三列。每个页面刷新看起来都不同。某些列表有时不显示。我该如何解决这个问题？

Answer 1

使用table不是列。

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

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

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

Answer 2

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

多列css问题

2 个答案: