CSS：一系列浮动元素没有环绕而是水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2373379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: series of floated elements without wrapping but rather scrolling horizontally
提问by tybro0103
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.
我正在制作专辑查看器。在顶部，我想要一个包含所有图像缩略图的水平容器。现在所有的缩略图都用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>
回答by gdelfino
How about using display: inline-blockthis 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;
}
回答by Robusto
Did you try
你试过了吗
white-space: nowrap;
in your #thumbnails_container?
在您的#thumbnails_container 中？
回答by Nick Craver
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;
}
Removethe 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.
它有点简单，它们会像你想要的那样跨越和滚动。
回答by Emanuele Del Grande
It is a common mistake thinking that setting the white-space property to "nowrap" also works on floated elements. It only works on inlineelements or inline-blockelements.
认为将 white-space 属性设置为“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/
这个解决方案打开了很多新的网页设计场景有待探索，所以我很感激作者：http: //foohack.com/2007/11/cross-browser-support-for-inline-block-造型/
Here you can read a document which speaks of the white-space property and the floated elements: http://reference.sitepoint.com/css/white-space
在这里，您可以阅读有关 white-space 属性和浮动元素的文档：http: //reference.sitepoint.com/css/white-space
Cheers!
干杯!
回答by Les
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（无论如何浏览器滚动条都很丑陋）
回答by Felix
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 提供所需的宽度修复（主体也会扩展）。然后将内容放入超大包装容器（浮动或内联）。现在您可以将窗口的水平滚动条用作滚动条。现在页面上的所有其他内容（页眉、页脚等）都在滚动。你可以给这些容器定位：固定。现在它们停留在那个位置，而你正在滚动超宽的包装器/主体。
回答by Felix
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-blockelements. You can also use fixed with/height inline-blockelements, so that your design is consistent.
您可以对display: inline-block元素使用“边框和诸如此类” 。您还可以使用固定的 with/heightinline-block元素，以便您的设计保持一致。
Basically, make .thumbnailnot-floated and display: inline-block, apply width/height, borders etc., and on #thumbnails_containeruse white-space: nowrap.
基本上，制作.thumbnail非浮动和display: inline-block，应用宽度/高度，边框等，并#thumbnails_container使用white-space: nowrap。
回答by qbeuek
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>
回答by RadioMan
This way worked for me
这种方式对我有用
main #thumbnailBox {
height: 154px;
width: auto;
overflow-x: scroll;
white-space: nowrap;}
main .thumbnail {
display: inline-block;}
