如何在列

Question

我知道我可以使用“列”在列之间均匀地分发列表项，例如

<ul style="columns: 3;">
  <li class="left">Data 1</li>
  <li class="left">Data 2</li>
  <li class="left">Data 3</li>
  <li class="middle">Data 4</li>
  <li class="middle">Data 5</li>
  <li class="middle">Data 6</li>
  <li class="middle">Data 7</li>
  <li class="middle">Data 8</li>
  <li class="middle">Data 9</li>
  <li class="middle">Data 10</li>
  <li class="right">Data 11</li>
  <li class="right">Data 12</li>
  <li class="right">Data 13</li>
  <li class="right">Data 14</li>
  <li class="right">Data 15</li>
</ul>

“columns”创建了这个：

Data 1   Data 6   Data 11
Data 2   Data 7   Data 12
Data 3   Data 8   Data 13   
Data 4   Data 9   Data 14
Data 5   Data 10  Data 15

相反，我想格式化为：

Data 1   Data 4   Data 11
Data 2   Data 5   Data 12
Data 3   Data 6   Data 13   
         Data 7   Data 14
         Data 8   Data 15
         Data 9   
         Data 10 

这甚至可以实现吗？

我对css有一个很好的理解，并且没有看到任何方法让列没有绝对定位上升到第2行和第3行的顶部，这在不同的高度变得有问题...除非我使用jQuery - 我认为这可能是唯一的方法吗？

不幸的是，Gravity Forms无法定义列，你甚至无法拆分成单独的列表（这将是最简单的）但我们至少可以添加css类 - 但我甚至认为这不会有帮助！< / p>

Answer 1

如果你打算使用jQuery，你可以这样做。我非常有兴趣看看是否可以仅使用CSS对单个列表进行此操作。

＆＃13;

＆＃13;

$(".middle").each(incrementOffset);
$(".right").each(incrementOffset);

function incrementOffset(index) {
  var $el = $(this);
  
  var offset = $el.height() * index;
  $el.css("top", offset + "px");
  
  // Increases the size of the list as it won't grow by itself with absolutely positioned items
  var $parent = $el.parent();
  if ($parent.height() < offset + $el.height()) {
    $parent.height(offset + $el.height());
  }
}

＆＃13;

ul {
  position: relative;
  list-style: none;
  padding-left: 0;
  background-color: #eee; /* to show list height */
}

.middle {
  position: absolute;
  left: 33%;
}

.right {
  position: absolute;
  left: 66%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="left">Data 1</li>
  <li class="left">Data 2</li>
  <li class="left">Data 3</li>
  <li class="middle">Data 4</li>
  <li class="middle">Data 5</li>
  <li class="middle">Data 6</li>
  <li class="middle">Data 7</li>
  <li class="middle">Data 8</li>
  <li class="middle">Data 9</li>
  <li class="middle">Data 10</li>
  <li class="right">Data 11</li>
  <li class="right">Data 12</li>
  <li class="right">Data 13</li>
  <li class="right">Data 14</li>
  <li class="right">Data 15</li>
</ul>

＆＃13;

＆＃13;

＆＃13;