html - 将 html 列表分成另一列

Question

我有一个 html 列表，它对于我的容器来说太长了，我想打破它并在另一列中显示额外的元素。但是当我在 css 中使用列时，它会平均划分列表。就像如果我有 12 个元素，那么每列中有 6-6 个。但我不想这样做。相反，我希望它只显示另一列中的额外元素。

在下图中，我想在另一列中显示从 9 到 12 的元素。

请帮助。

CSS

.subMenuHolder{
  display: none;
  position: absolute;
  top: 0px;
  left: 100%;
}

.subMenu{
  border: 1px #00f solid;
  margin-left: 20px;
  list-style: inside decimal;
  padding: 30px 30px;
  width: 500px;
  height: 350px;
  -webkit-columns: 250px;
  -moz-columns: 250px;
  columns: 250px;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em; 
}

.categoryMenu1{
  background: url(/theme/images/pictures/potato-onion1.png) no-repeat;
  background-size: 350px 200px;
  background-position: bottom right;
  background-color: #f2f9fd;
}

.subMenu li{
  border: 1px #f00 solid;
  padding: 5px 0px;
  text-transform: none;
  font-size: 16px;
  color: #757575;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

HTML

<ul class="subMenu categoryMenu1">
  <a class="sub-heading">Category 2</a>
  <li><a href="" data-title="Price- ₹15/kg">Cabbage</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Carrot</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Reddish</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Peas</a></li>
  <li><a href="" data-title="Price- ₹15/kg">French Beans</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Jackfruit</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Tori</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sweet corn</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Broccoli</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Cucumber</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Sem</a></li>
  <li><a href="" data-title="Price- ₹15/kg">Capsicum (Green)</a></li>
</ul>

请引用这张图片

正如您在图片中看到的，9 到 12 个列表项是开箱即用的。我无法将其放入箱子中。

Answer 1

您错误地使用了 columns 属性。

你有:

.subMenu{
...
 columns: 250px;
...
}

这个属性不是在寻找列的大小，它是在寻找应该生成多少列(以及其他属性:w3 CSS3 Columns Property)

因此，当您将此属性更改为“2”(或任意多个所需的列)时，我相信我们会得到您想要的结果:

Fiddle

旁注:在您的问题中，您说您希望第一列有 9 行，第二列有其余行。我找不到一个“列”特定的方法来做到这一点，所以作为黑客我调整了容器的高度。请参阅 fiddle 中的 CSS。

最后，在@AhmetEmre90 提供的链接中，有一个 IE hack - 因为旧版本的 IE 不会设置此属性的样式。我为后代包括了链接和 IE hack。

代码:@Gabriel:SO- How to display an unordered list in two columns?

HTML

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
    </ul>
</div>

JavaScript

(function($){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
    }

    $(function(){
        setupColumns();
        updateColumns();
    });
})(jQuery);

CSS

.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}