Question

我有一个缩略图库，一个只显示3个缩略图的div，用户可以向左或向右拖动鼠标以显示更多。

我想要实现的目标： - 所有6个框在一行中对齐，但只显示左边的3个。如果在div之外，右边3将被隐藏 - 当我将框拖出div时，该框将被隐藏

<div class="container">
    <div class="image_holder">
        <div class="drag">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
    </div>
</div>

我遇到了一些问题，我不想使用插件。有人能引导我走上正轨吗？

我正在尝试做http://www.pikachoose.com/这样的事情，你可以看到它包含5个缩略图，我想要做的是1行中超过10个缩略图但只有5个可见，用户可以将鼠标拖动到滑动以查看其他缩略图。

Answer 1

首先，您需要在.image_holder

中添加以下样式

overflow : hidden;

溢出决定当框内的内容溢出时，它应该如何反应。使用隐藏，我们决定将内容隐藏在框内。

代码中的问题：

现在你已经将.image_holder的宽度指定为300px，当它的内部元素的累积宽度超过它自己的宽度时，它们会分解到左下角。

解决方案：

因此，要使所有这些元素在溢出.image_holder时隐藏，您必须保留另一个div ，其中包含所有宽度范围较宽的元素。幸运的是，你有那个.drag的div。只要给它一个更大的宽度，

.drag{
    width : 1000px;
}

现在这个.drag div会在.image_holder中流动，因为它的宽度是一个很大的值，所有元素都会在一行中，它们也会像你期望的那样在.image_holder div里面流动。

这是一个工作小提琴： jsFiddle

参考文献：

CSS overflow Property

鼠标拖动后仅显示3个缩略图时出现问题

1 个答案: