Блог

У меня есть ul, установленный в качестве виджета для сортировки пользовательского интерфейса jQuery: его высота всегда вычисляется равной 0, что приводит к тому, что он не помещается в родительский div. Смотрите скриншот:

jQuery для построения сортируемого:

     $(function() {
        $("#sortable").sortable({
            stop: function(event, ui) {
                // Code
            }
        });
        $( "#sortable" ).disableSelection();
    });
 

Стиль ul:

     #sortable { 
        list-style-type: none; 
        margin: 0 auto; 
        padding: 0; 
        width: 800px; 
    }
    #sortable li {
        margin: 3px 3px 3px 0;
        padding: 4px;
        float: left;
        width: 100px;
        height: 90px;
        font-size: 4em;
        background: white;
        text-align: center;
    }
 

Это связано с тем, что содержимое внутри #sortable находится в плавающем состоянии, что означает, что родительский контейнер #sortable не расширяется для хранения этого содержимого (высота равна нулю, потому что она по существу пуста для родительского элемента). Плавающее содержимое не влияет на другое содержимое вокруг него обычным способом, но добавление переполнения заставляет родительский контейнер распознавать плавающие дочерние элементы как содержащиеся внутри него, и дает ему высоту для размещения (поскольку ему необходимо определить, видны они или нет).

Добавьте overflow: hidden или overflow: auto #sortable , чтобы его высота соответствовала содержимому.

Однако, если вы хотите, чтобы поток страницы был растянут до размеров сортируемого объекта, вам следует добавить clearfix, например, micro clearfix #sortable . Это должно решить проблему с потоком.

Добавить overflow:auto в #sortable .