решетки не выровнены правильно - PullRequest
Новая
       15

решетки не выровнены правильно

0 голосов
/ 27 марта 2019

Я использую grider.js в моем проекте, но по какой-то причине (а также из-за нехватки документации на этом сайте) им трудно получить то, что я хочу.

Мой html 

<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">A</li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="2">B</li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="2">C</li>
        <li data-row="4" data-col="1" data-sizex="1" data-sizey="2">D</li>
        <li data-row="5" data-col="1" data-sizex="1" data-sizey="2">E</li>
    </ul>
</div>

, а мой js 

      var gridster;

      $(function(){

        gridster = $(".gridster ul").gridster({
          widget_base_dimensions: [100, 20],
          widget_margins: [5, 5],
          helper: 'clone',
          /*max_rows: 16,
          max_cols: 10,*/
          resize: {
            enabled: true,
            max_size: [4, 4],
            min_size: [1, 1]
          }
        }).data('gridster');


      });

css равен 

.gridster ul {
    list-style: none;
    background-color: gray;
}
.gridster ul li {
    background-color: red;
}

Вот вывод, который выглядит неправильно,

enter image description here

Я ожидаю, что все A, B, C, D и E будут в одном столбце с 5 различными строками.Причина, по которой я это делаю, заключается в том, что я хочу, чтобы первый виджет имел меньший размер, чем все остальные виджеты.

JsFiddle для моей проблемы.

...