在围绕其他元素定位时动态更新多列列表

Question

首先，我为这篇文章的标题道歉，我不确定如何将我想要的内容写成文字，所以也许这些图片会有所帮助。

这就是我想要的最终结果：

这是我坚持的地方：

我有一堆JS对象包含可变数量的“品牌”和“通用”产品，因此每个列表的大小根据被调用的国家/地区而有所不同。问题来自于我拥有大量“通用”产品，因为在第一列后，它们被设计为溢出到下一列，最多三分之一。但是，我需要将这些“溢出”列表项推送到可用空间的顶部。

我尝试position: absolute我的列表，并使用以下方法动态更新通用列表的顶部间距：

$('ul#genericList li:first-type-of').css('top', $('#branded').height());

但是我收到以下错误：

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: first-type-of

我创造了最好的 FIDDLE ，但没有包含太多不重要的内容。

我的HTML非常简单：

<div class="modalInner">
    <div id="branded">
        <p>BRANDED</p>
        <ul id="brandedList"></ul>
    </div>
    <div id="generic">
        <p>GENERIC</p>
        <ul id="genericList"></ul>
    </div>
    <div class="map"></div>
</div>

CSS（SASS）：

.modal {

    ul {
        top:0;
        margin:0;
        padding-left:0;
        z-index:101;
    }

    ul#genericList {
        position:relative;
        -webkit-column-count: 3;

        li:first-of-type {
            top:0; //height of branded list
        }

        li:last-of-type {
            padding-top:149px;
        }
    }
}

Answer 1

不幸的是，由于没有列模型的填充或边距概念，因此您无法对列进行任何操作。

我建议使用其他方法创建自己的列，以便您可以更好地控制定位。我使用display:inline-block和width:33%;创建了一个解决方案。不是最漂亮的解决方案，但我认为它会帮助您找到您正在寻找的。

jsfiddle：http://jsfiddle.net/46ek5/22/。

对于Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: first-type-of，选择器应为:first-of-type。

列模型：http://www.w3.org/TR/css3-multicol/#the-multi-column-model

Answer 2

这里你有几个不同的选择。

我使用bootstrap，因为它附带了一些内置的东西。

jsfiddle: http://jsfiddle.net/melaniersumner/jLvqH/

使用脚本动态地将列表项附加到适当的列表，并将其基于计数器。一旦列表达到X计数，然后将列表项追加到下一个列表等。

<div class="container">
   <div class="row">
      <div class="col-sm-4">
        <ul>
         <li></li>
       </ul>
      </div>
      <div class="col-sm-4">
        <ul>
         <li></li>
       </ul>
      </div>
     <div class="col-sm-4">
        <ul>
         <li></li>
       </ul>
      </div>

   </div>

</div>