html - 图像未按父 div 中的预期触发溢出-x 滚动条

Question

嗨，我一直在尝试创建一个简单的图像库，但是overflow-x当我的图像累积宽度达到大于其 parent 的值时，滚动条出现问题div。

看看这个演示问题的小提琴。

我只想能够调整窗口大小并overflow-x在有很多缩略图在其父级的可用宽度内水平显示时显示滚动条。

Answer 1

The cleanest, and easiest way to achieve this is to add white-space: nowrap; to your container div and the images within it:

CSS

.container {
    height: 140px;
    width: 100%;
    border: solid 1px red;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

img {
    white-space: nowrap;
}

HTML

<div class="container">
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
    <img src="http://images.gs-cdn.net/static/artists/120_artist.png"/>
</div>

Should dynamically adjust as required, enjoy!

Answer 2

这是另一个纯 CSS 解决方案：

我将图像放在另一个 div 中

<div style='height:100%; display: inline; white-space: nowrap;'>

检查jsfiddle。

PS：我复制了几次图像只是为了展示更多图像的外观。内联 css 可以移动到类或 ID，但这取决于您。

编辑：错误的链接。对不起，我换了：）

Answer 3

这个小提琴应该可以解决问题......缩略图图像有一个固定宽度的容器，当包含的图像向右溢出时，它有一个水平滚动条。

HTML

<div class="gallery-container">
    <div class="gallery">
        <div class="thumbnails">
            <img src="http://www.drawingcoach.com/image-files/cartoon_trees_st5.jpg"/>
            <img src="http://www.aperfectworld.org/clipart/nature/cartoon_tree.png"/>
            <img src="http://84d1f3.medialib.glogster.com/media/23/23af5b409b4e973a9353048b062d73a33677c1f64c4b912a0aa6930081894f48/tree-cartoon-jpg.jpg"/>
            <img src="http://www.drawingcoach.com/image-files/cartoon_trees_st5.jpg"/>
            <img src="http://www.aperfectworld.org/clipart/nature/cartoon_tree.png"/>
            <img src="http://84d1f3.medialib.glogster.com/media/23/23af5b409b4e973a9353048b062d73a33677c1f64c4b912a0aa6930081894f48/tree-cartoon-jpg.jpg"/>
        </div>
    </div>
    <img class="fullpic" src="" />
</div>

CSS

.gallery
{
    border: 1px solid black;
    height: 120px;
    width: 200px;
    overflow: hidden;
    overflow-x: scroll;
}

.thumbnails
{
    /* Arbitrarily large number */
    width: 10000px;
}

.gallery-container img /* larger size image */
{
    width: 200px;
    height: auto;
}

.thumbnails img
{
    width: auto;
    height: 100px;
    display: block;
    float: left;
    border: 1px solid #ddd;
    margin: 1px;
}

（可选）jQuery

$('.thumbnails img').click(function() {
    $(this).parent().parent().find('.selected').attr('src', $(this).attr('src'));
});