Question

我在无序列表上使用jQuery UI .sortable（）将列表拆分为多个列。我希望在填充下一列之前，首先根据容器的高度填充第一列，这似乎正常。但是，如果将#testing设置为某个高度，则项目的一部分会重叠到下一列而不是整个项目中。

HTML

<div id="testing">
    <ul id="sortable">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
</div>

<script>
    $( function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    } );
</script>

CSS

body {
  font-family: "Trebuchet MS", sans-serif;
  margin: 0px;
}

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-fill: auto;
  height: 100%;
  max-height: 100%;
  background-color: yellow;
}

#sortable li {
  margin: 0; 
  padding: 0em; 
  padding-left: 0em; 
  font-size: 1em;
  height: 70px;
  border: 1px solid black;
}

#testing {
  height: 400px;
  max-height: 400px;
  background-color: red;
}

jsFiddle：https://jsfiddle.net/Lavscokb/2/

作为旁注，最终每个列表元素将包含它自己的div布局，它填充整个元素。是否有更好/不同的方式我应该这样做？

jQueryUI .sortable（）＆amp; CSS多列布局，项目的一部分移动到下一列

0 个答案: