jQuery UI Sortable框始终具有高度：0

debugcn 发表于 Dev

西奥多·R·史密斯

我将ul设置为jQuery UI Sortable小部件：总是将其高度计算为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;
    }

恩努伊

This is because the content inside #sortable is all floated, which means the parent container #sortable doesn't expand to hold that content (the height is zero because it's essentially empty as far as the parent is concerned). Floated content doesn't affect other content around it in the normal way, but adding an overflow forces the parent container to recognize the floated children as contained within itself and gives it a height to accommodate (as it needs to determine whether they are visible or not).

Add overflow: hidden or overflow: auto to #sortable to make its height match the content.

但是，如果您希望将页面的流程扩展到可排序对象的尺寸，则应将microfix之类的clearfix添加到#sortable。那应该解决流程问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-7

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章