CSS:没有包装的浮动元素系列，而是水平滚动。

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.

我在做一个相册查看器。在顶部，我想要一个包含所有图像缩略图的水平容器。现在所有的缩略图都封装在一个div中，带有float:left。我正试图弄清楚，如果有太多的缩略图，如何防止它们缠绕到下一行，而是将它们全部放在一个水平行中，并使用滚动条。

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>

9 个解决方案

#1

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

使用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;
}

#2

Did you try

你试过

white-space: nowrap;

in your #thumbnails_container?

在你的# thumbnails_container吗?

#3

Instead of floating, try this:

不要漂浮，试试以下方法:

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

Remove the div { overflow:hidden; }, the rest stays the same.

删除div {overflow:hidden;其余的保持不变。

It's a bit simpler and they'll span across and scroll like you want.

它更简单一点，它们会像你想的那样跨越和滚动。

#4

It is a common mistake thinking that setting the white-space property to "nowrap" also works on floated elements. It only works on inline elements or inline-block elements.

将空白属性设置为“nowrap”是一个常见的错误，它也适用于浮动元素。它只适用于内联元素或内联块元素。

I guess you need the floated elements to be a block, so you could turn them into inline blocks. It is possible to gain it on all the browsers with some trick:

我猜你需要浮动元素作为一个块，所以你可以把它们变成内联块。在所有浏览器上都可以使用以下技巧:

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

This solution opens a lot of new web-design sceneries to be explored, so I gratefully give the proper credits to the author: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

这个解决方案为我们打开了许多新的web设计场景，因此我非常感谢作者:http://foohack.com/2007/11/cross-browser-support for inline-block- style /

Here you can read a document which speaks of the white-space property and the floated elements: http://reference.sitepoint.com/css/white-space

在这里，您可以阅读一个文档，其中提到了空白属性和浮动元素:http://reference.sitepoint.com/css/white-space

Cheers!

干杯!

#5

This is driving me nuts, can't figure it out.

这把我逼疯了，搞不清楚。

This kinda works:

这有点工作:

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

But I have no idea about browser support for display: table-cell;

但是我不知道浏览器对display的支持:table-cell;

Personally i would either make the thumbs vertical or use javascript (the browser scrollbar is ugly anyways)

就我个人而言，我要么让拇指垂直，要么使用javascript(无论如何，浏览器滚动条都很难看)

#6

I had the same problem a few months ago. I tried all solutions presented here. They don't work.

几个月前我遇到了同样的问题。我尝试了所有的解决方案。他们不工作。

This is my solution:

这是我的解决方案:

Give the wrapper div the needed width fix (body will expand, too). Then put the content in the extra large wrapper container (float or inline). Now you can use the horizontal scrollbar of the window as scrollbar. Now everything else on the page (header, footer etc.) is scrolling with. You can give these containers position:fixed. Now they stay on there position, while you are scrolling the extra wide wrapper/body.

给包装器div设置所需的宽度(body也将展开)。然后将内容放在超大的包装容器中(浮动或内联)。现在可以使用窗口的水平滚动条作为滚动条。现在页面上的其他内容(页眉、页脚等)都在滚动。你可以给这些容器位置:固定。现在它们保持在那里的位置，而您正在滚动额外的宽幅包装/正文。

#7

I would still prefer to be able to use block elements for the thumbnails tho so I can add borders and what not.

我仍然希望能够为缩略图使用块元素，这样我就可以添加边框等等。

You can use "borders and whatnot" with display: inline-block elements. You can also use fixed with/height inline-block elements, so that your design is consistent.

您可以使用“边框和什么的”和display: inline-block元素。您还可以使用固定的/height inline-block元素，以便您的设计是一致的。

Basically, make .thumbnail not-floated and display: inline-block, apply width/height, borders etc., and on #thumbnails_container use white-space: nowrap.

基本上，使.thumbnail不浮动和显示:内联块，应用宽度/高度，边框等，在#thumbnails_container使用空格:nowrap。

#8

Add another container for the thumbnails and set it's width to the total width of all thumbnails (along with their margins, borders and padding). Look below at div named "thumbnails_scrollcontainer":

为缩略图添加另一个容器，并将其宽度设置为所有缩略图的总宽度(以及它们的边距、边框和填充)。查看下面命名为“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>

#9

This way worked for me

这种方法对我很管用

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

main .thumbnail {
display: inline-block;}