Question

我正在开发项目，在水平滑块中我需要显示多个产品块。由于没有固定数量的产品，我已经给出了1360％的宽度，现在我面临的问题是，如果产品小于div中显示的白色空间，这显然是1360％div的大小。如果我保持div auto的宽度，那么设计结构混乱。我怎样才能避免这个空白区？

permutations in itertools library

直播网站链接 -

CSS

.common-blocks {
    width: 100%;
    width: 1366%;
    overflow: hidden;
    height: auto;
    transition: all 0.5s;
    margin-left: 0px;
}

在上面的CSS中如果我保持宽度自动＆amp; max-width：1360％然后内容重叠

Jquery的

<script>
        var registerEvents = function () {
            $(".next").off("click").on("click", function (event) {
                if ($(this).hasClass('disable')) return;
                $(this).addClass('disable');
                window.setTimeout(function () {
                    $(event.target).removeClass('disable');
                }, 510);
                var targetBlock = $(event.target).parents().children(".common-blocks");
                var leftMargin = parseInt(targetBlock.css("marginLeft") || 0);
                var numberOfBlocks = targetBlock.children(".blocks").length; //    Total Number of blocks 
                var displayCount = 3;//Number of blocks displaying at a time
                if (leftMargin <= (numberOfBlocks - displayCount) * (-1024))  // -300 width   of    block in left direction
                    return;
                targetBlock.css("marginLeft", parseInt(leftMargin - 1024) + "px")
            });
            $(".prev").off("click").on("click", function (event) {
                if ($(this).hasClass('disable')) return;
                $(this).addClass('disable');
                window.setTimeout(function () {
                    $(event.target).removeClass('disable');
                }, 510);
                var targetBlock = $(event.target).parents().children(".common-blocks");
                var leftMargin = parseInt(targetBlock.css("marginLeft") || 0);
                if (leftMargin == 0)
                    return;
                targetBlock.css("marginLeft", parseInt(leftMargin + 1024) + "px")
            });

        }();
    </script>

因为它是动态内容所以我无法显示标记，因为代码变得冗长

Answer 1

更改css：

.blocks {
    width: 100% !important;
    max-width: 249px !important;
    margin: 5px 0px 0 1px;
}

Answer 2

请参阅图片以了解更改css类：

jquery水平滑块白色空间问题

2 个答案: