CSS：浮动元素系列，不包括但是水平滚动 [英] CSS: series of floated elements without wrapping but rather scrolling horizontally

问题描述

我正在制作专辑检视器。在顶部，我想要一个水平容器的所有图像缩略图。现在所有的缩略图都被包装在一个div中， float：left 。我试图找出如何保持这些缩略图包装到下一行，当有太多，而是保持在一个水平行，并使用滚动条。

I'm working on a album viewer. At the top I want a horizontal container of all the image thumbnails. Right now all the thumbnails are wrapped in a div with float:left. I'm trying to figure out how to keep these thumbnails from wrapping to the next line when there are too many, but rather stay all in one horizontal row and use the scrollbar.

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

Here's my code: (I don't want to use tables)

<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>

推荐答案

inline-block 这种方式你可以使用块元素的边框，并获得水平滚动条。

How about using display: inline-block this way you can use borders on the block elements and get the horizontal scroll bar.

#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;
}

这篇关于CSS：浮动元素系列，不包括但是水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！