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

首先，我为这篇文章的标题道歉，我真的不知道如何用语言表达我想要的，所以也许这些图片会有所帮助

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

这正是我被困的地方：

我有一堆JS对象，其中包含数量可变的“品牌”和“通用”产品，因此每个列表的大小根据所调用的国家而异。问题来自于当我有大量的“通用”产品时，因为在第一列之后，它们的样式会溢出到下一列，最多是第三列。但是，我需要这些“溢出”列表项才能推到可用空间的顶部

我已尝试

定位：绝对

我的列表，并使用以下命令动态更新通用列表的顶部间距：

$（'ul#genericslist li:first type of'）.css（'top'，$（'#branded'）.height（））

但我得到了以下错误：

未捕获错误：语法错误，无法识别的表达式：不支持的伪：第一种类型的

我已经创造了最好的我可以不包括太多不重要的东西

我的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>

不幸的是，您无法对列执行太多操作，因为列模型没有填充或边距的概念

我建议您使用其他方法创建自己的专栏，这样您就可以更好地控制定位。我使用
display:inline block
和
width:33%创建了一个解决方案。这不是最好的解决方案，但我认为它会帮助你找到你想要的

JSFIDLE:

对于
未捕获错误：语法错误，无法识别的表达式：不支持的伪：第一种类型的
，选择器应为
：第一种类型的

柱模型：
这里有几个不同的选项

我使用bootstrap是因为它内置了一些这样的东西


使用脚本将列表项动态附加到适当的列表中，并基于计数器。一旦列表达到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>











你能给我们提供一个吗？@imtheman我为你准备了一把小提琴从不使用大写，而是使用
text transform:uppercase
）。最好使用
margin:auto
to center（），因为使用
position:absolute
时，如果窗口不宽，它会被剪切enough@Oriol可以但是你能帮我解决我的实际问题吗？@BadDog我想做这些列的唯一方法是（
列计数：3
，），但我不知道如何将
.map
放在第三列的顶部。我尝试了浮动，但使用
列计数
类似于
溢出：隐藏
。
<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>