Question

我正在使用jQuery制作幻灯片，我有几张图像应该一次一张地滑动。我使用宽度与图像宽度相同的div：80像素。我使用了white-space:no-wrap和overflow:hidden，但他们并没有在div之外创建一个图像，而在内部创建一个图像。图像仍然紧挨着。
HTML：

<div>
<img src="http://k44.kn3.net/3EADB8415.jpg">
<img src="http://slodive.com/wp-content/uploads/2012/10/yorkie-poo-pictures/cute-yorkie-poo-picture.jpg">
</div>

CSS：

img{
    width:80px;
    border:1px solid gold;
}
div{
    width:80px
    white-space:no-wrap;
    overflow:hidden;
}

FIDDLE

Answer 1

如果您没有设置高度或位置，您的方框将自动调整大小。请尝试以下方法：

div {
    width: 80px;
    height: 80px;
    white-space:no-wrap;
    overflow:hidden;
}

这将使您的盒子具有实际尺寸的所有要求，并且可以使溢出隐藏成为可能。

（另外，正如大家所提到的，你需要分号 - 没有它也不会有效，但是如果你不添加高度，你仍会看到其他图像的一点点。）

Answer 2

CSS宽度语句后缺少分号。添加它，CSS将有效，并隐藏图像

div{
    width:80px            <-- Missing semicolon!
    white-space:no-wrap;
    overflow:hidden;
}

没有隐藏溢出的图像：隐藏

2 个答案: