Question

我正在制作专辑查看器。在顶部我想要一个所有图像缩略图的水平容器。现在所有的缩略图都包含在float:left的div中。我试图找出如何在太多时将这些缩略图保持包裹到下一行，而是将所有缩略图保留在一个水平行中并使用滚动条。

这是我的代码：（我不想使用表格）

<style type="text/css">
    div {
        overflow:hidden;
    }
    #frame {
        width:600px;
        padding:8px;
        border:1px solid black;
    }
    #thumbnails_container {
        height:75px;
        border:1px solid black;
        padding:4px;
        overflow-x:scroll;
    }
    .thumbnail {
        border:1px solid black;
        margin-right:4px;
        width:100px; height:75px;
        float:left;
    }
    .thumbnail img {
        width:100px; height:75px;
    }
    #current_image_container img {
        width:600px;
    }
</style>
<div id="frame">
    <div id="thumbnails_container">
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/glry-pixie-bob-kittens.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-1.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-3.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-Jan08.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery3.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery4.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten3.jpg" alt="foo" /></div>
        <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten1.jpg" alt="foo" /></div>
    </div>
    <div id="current_image_container">
        <img src="http://www.whitetailrun.com/Pixiebobs/PBkittenpics/shani-kits/Cats0031a.jpg" alt="foo" />
    </div>
</div>

Answer 1

如何以这种方式使用display: inline-block，您可以在块元素上使用边框并获取水平滚动条。

#thumbnails_container {
    height:75px;
    border:1px solid black;
    padding:4px;
    overflow-x:scroll;
    white-space: nowrap
}
.thumbnail {
    border:1px solid black;
    margin-right:4px;
    width:100px; height:75px;
    display: inline-block;
}

Answer 2

你试过吗

white-space: nowrap;

在#thumbnails_container中？

Answer 3

不要漂浮，试试这个：

#thumbnails_container {
    height:75px;
    border:1px solid black;
    padding:4px;
    overflow-x:scroll;
    overflow-y: hidden;
}
.thumbnail {
    border:1px solid black;
    margin-right:4px;
    width:100px; height:75px;
    display: inline;
}

删除 div { overflow:hidden; }，其余内容保持不变。

它有点简单，它们会跨越并滚动你想要的。

Answer 4

认为将white-space属性设置为“nowrap”也适用于浮动元素是一个常见的错误。它仅适用于内嵌元素或内嵌块元素。

我猜你需要将浮动元素作为块，因此可以将它们转换为内联块。可以通过一些技巧在所有浏览器上获得它：

display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;

这个解决方案打开了许多新的网页设计风景，所以我很感激地给作者提供了适当的信用： http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

在这里，您可以阅读一个说明白色空间属性和浮动元素的文档： http://reference.sitepoint.com/css/white-space

干杯！

Answer 5

这让我疯了，无法弄清楚。

这种方式有效：

.thumbnail {
    padding-right:4px;
    width:100px; height:75px;
    display: table-cell;
}
.thumbnail img {
    border:1px solid black;
    display: block;
    width:100px; height:75px;
}

但我不知道浏览器支持display：table-cell;

就个人而言，我要么竖起大拇指还是使用javascript（浏览器滚动条无论如何都是丑陋的）

Answer 6

几个月前我遇到了同样的问题。我试过这里提出的所有解决方案它们不起作用。

这是我的解决方案：

给包装器div提供所需的宽度修复（主体也会扩展）。然后将内容放在超大的包装容器（浮点或内联）中。现在，您可以使用窗口的水平滚动条作为滚动条。现在页面上的其他内容（页眉，页脚等）都在滚动。你可以给这些容器定位：固定。现在他们保持在那里的位置，同时你滚动超宽的包装/身体。

Answer 7

我仍然希望能够使用块元素作为缩略图，所以我可以添加边框，而不是。

您可以对display: inline-block元素使用“border and whatnot”。您还可以使用固定的/ height inline-block元素，以使您的设计保持一致。

基本上，使.thumbnail不浮动，display: inline-block，应用宽度/高度，边框等，然后#thumbnails_container使用white-space: nowrap。

Answer 8

为缩略图添加另一个容器，并将其宽度设置为所有缩略图的总宽度（以及它们的边距，边框和填充）。请看下面名为“thumbnails_scrollcontainer”的div：

<style type="text/css">
div {
    overflow:hidden;
}
#frame {
    width:600px;
    padding:8px;
    border:1px solid black;
}
#thumbnails_container {
    height:75px;
    border:1px solid black;
    padding:4px;
    overflow-x:scroll;
}
.thumbnail {
    border:1px solid black;
    margin-right:4px;
    width:100px; height:75px;
    float:left;
}
.thumbnail img {
    width:100px; height:75px;
}
#current_image_container img {
    width:600px;
}
</style>
<div id="frame">
    <div id="thumbnails_container">
        <div id="thumbnails_scrollcontainer" style="width : 848px;">
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/glry-pixie-bob-kittens.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-1.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-KitJan08-3.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/PB-Jan08.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery3.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/images/gallery4.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten3.jpg" alt="foo" /></div>
            <div class="thumbnail"><img src="http://www.blueridgexotics.com/Gallery-Pics/kitten1.jpg" alt="foo" /></div>
        </div>
    </div>
    <div id="current_image_container">
        <img src="http://www.whitetailrun.com/Pixiebobs/PBkittenpics/shani-kits/Cats0031a.jpg" alt="foo" />
    </div>
</div>

Answer 9

我知道这是一个老问题了，但这是在Google搜索中提出的。我试图在移动设备上将浮动版式更改为水平滚动版式。以上都不对我有用。相反，我使用了以下适用于我的情况的

：

    main
 {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
 }
 
    main .thumbnail
 {
    width: 400px;
    flex-shrink: 0;
 }

Answer 10

这种方式对我有用

main #thumbnailBox {
height: 154px;
width: auto;
overflow-x: scroll;
white-space: nowrap;}

main .thumbnail {
display: inline-block;}

CSS：一系列浮动元素，没有包装，而是水平滚动

10 个答案: