Question

在我正在处理的图片库中，我想要一个水平滚动（即缩略图是水平列出的），包含它们的区域应该有一个固定的宽度和滚动，如果有多个适合该区域。< / p>

到目前为止，下面是CSS代码，但它似乎无法正常工作，因为您可以在代码下方的快照中看到。我能写些什么来完成我想要的东西？

提前致谢！

#thumbnailArea {
    padding: 5px;
    width: 600px;
    height: 90px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid black;
}

enter image description here

缩略图区域的HTML代码（使用ASP.net webforms生成）如下：

<div id="thumbnailArea"> 

            <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a> 

            <a id="ImageRepeater_ImageHyperLink_1" class="thumbnails" href="default.aspx?name=Autumn.jpg"><img id="ImageRepeater_Image1_1" class="thumbnail" src="Images/Thumbnails/Autumn.jpg" /></a> 

and so on...

</div>

Answer 1

那是因为容器适合您提供的宽度。要获得所需的效果，您应该使用两个嵌套的div：外部具有给定宽度，内部保持图像。

示例：http://jsfiddle.net/jTJFa/1/

HTML：

<div class="box">
    <div class="area">
        <img/>
        ...
    </div>
</div>

的CSS：

.box {
    width: 500px;
    overflow-x: scroll;
}

.area {
    width: 1000px;
}

Answer 2

虽然您已关闭垂直滚动，但#thumbnailArea宽度不受影响（因此，强制换行）。这应该可以解决问题：

#thumbnailArea {
 white-space:nowrap;
}

Answer 3

要使其正常工作，您需要在缩略图div中使用宽度为div的div，以便所有图片都适合内部：

<div id="thumbnailArea"> 
    <div style="width: 1000px;">
         <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>

        <a id="ImageRepeater_ImageHyperLink_0" class="thumbnails" href="default.aspx?name=Winter.jpg"><img id="ImageRepeater_Image1_0" class="thumbnail" src="Images/Thumbnails/Winter.jpg" /></a>

       and so on...
    </div>
</div>

这应该可以解决问题，改变宽度，以便在最后没有大量的空白空间

只有CSS的水平滚动

3 个答案: