Html 使内容在 div 内水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6497373/
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
Make content horizontally scroll inside a div
提问by Aayush
I have a division in which I wanna show images and on click open them in a lightbox. I have floated them left and displayed them inline. set overflow-x to scroll but it still puts the images below once the row space is not enough. I wanna get them to be inline and display a horizontal scroll when needed.
我有一个部门，我想在其中显示图像，然后单击在灯箱中打开它们。我已将它们向左浮动并内嵌显示。将 overflow-x 设置为滚动，但一旦行空间不够，它仍会将图像放在下方。我想让它们内联并在需要时显示水平滚动。
NOTE:I can't change the structure of the images inside. It has to be a img inside an anchor. My lightbox requires it like that.
注意：我无法更改内部图像的结构。它必须是锚内的 img。我的灯箱需要这样。
HTML:
HTML：
<div id="myWorkContent">
<a href="assets/work/1.jpg"><img src="assets/work/1.jpg" height="190" /></a>
<a href="assets/work/2.jpg"><img src="assets/work/2.jpg" height="190" /></a>
<a href="assets/work/3.jpg"><img src="assets/work/3.jpg" height="190" /></a>
<a href="assets/work/4.jpg"><img src="assets/work/4.jpg" height="190" /></a>
<a href="assets/work/5.jpg"><img src="assets/work/5.jpg" height="190" /></a>
<a href="assets/work/6.jpg"><img src="assets/work/6.jpg" height="190" /></a>
</div><!-- end myWorkContent -->
CSS:
CSS：
#myWorkContent{
width:530px;
height:210px;
border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
}
#myWorkContent a {
display: inline;
float:left
}
I know this is very basic but I just can't get it done. Don't know what's wrong.
我知道这是非常基本的，但我就是做不到。不知道怎么回事。
回答by Daniel O'Hara
It may be something like this in HTML:
在 HTML 中可能是这样的：
<div class="container-outer">
<div class="container-inner">
<!-- Your images over here -->
</div>
</div>
With this stylesheet:
使用此样式表：
.container-outer { overflow: scroll; width: 500px; height: 210px; }
.container-inner { width: 10000px; }
You can even create an intelligent script to calculate the inner container width, like this one:
您甚至可以创建一个智能脚本来计算内部容器宽度，如下所示：
$(document).ready(function() {
var container_width = SINGLE_IMAGE_WIDTH * $(".container-inner a").length;
$(".container-inner").css("width", container_width);
});
回答by clairesuzy
if you remove the float: leftfrom the aand add white-space: nowrapto the outer div
如果您float: left从 中删除a并添加white-space: nowrap到外部div
#myWorkContent{
width:530px;
height:210px;
border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#myWorkContent a {
display: inline;
}
this should work for any size or amount of images..
这应该适用于任何大小或数量的图像..
or even:
甚至：
#myWorkContent a {
display: inline-block;
vertical-align: middle;
}
which would also vertically align images of different heights if required
如果需要，它还可以垂直对齐不同高度的图像
test code
测试代码
回答by papiro
Same as what clairesuzy answered, except you can get a similar result by adding display: flexinstead of white-space: nowrap. Using display: flexwill collapse the img "margins", in case that behavior is preferred.
与 clairesuzy 的回答相同，除了您可以通过添加display: flex而不是white-space: nowrap. 使用display: flex将折叠 img“边距”，以防这种行为是首选。
回答by Jason Gennaro
The problem is that your imgs will always bump down to the next line because of the containing div.
问题是你的imgs 总是会碰到下一行，因为包含div.
In order to get around this, you need to place the imgs in their own divwith a widthwide enough to hold all of them. Then you can use your styles as is.
为了解决这个问题，您需要将imgs放置在它们自己的位置div，并且width足够宽以容纳所有它们。然后您可以按原样使用您的样式。
So, when I set the imgs to 120pxeach and place them inside a
所以，当我将imgs设置为120pxeach 并将它们放在一个
div#insideDiv{
width:800px;
}
it all works.
一切正常。
Adjust width as necessary.
根据需要调整宽度。
回答by lwdthe1
@marcio-junior's answer (https://stackoverflow.com/a/6497462/4038790) works perfectly, but I wanted to explain for those who don't understand why it works:
@marcio-junior 的回答 ( https://stackoverflow.com/a/6497462/4038790) 完美无缺，但我想向那些不明白它为什么起作用的人解释一下：
@a7omiton Along with @psyren89's response to your question
@a7omiton 以及@psyren89 对您问题的回答
Think of the outer divas a movie screen and the inner divas the setting in which the characters move around. If you were viewing the setting in person, that is without a screen around it, you would be able to see all of the characters at once assuming your eyes have a large enough field of vision. That would mean the setting wouldn't have to scroll (move left to right) in order for you to see more of it and so it would stay still.
将外部div视为电影屏幕，将内部div视为角色四处走动的环境。如果您亲自查看场景，即周围没有屏幕，假设您的眼睛有足够大的视野，您将能够一次看到所有角色。这意味着设置不必滚动（从左到右移动）以便您看到更多内容，因此它会保持静止。
However, you are not at the setting in person, you are viewing it from your computer screen which has a width of 500px while the setting has a width of 1000px. Thus, you will need to scroll (move left to right) the setting in order to see more of the characters inside of it.
但是，您不是亲临设置，而是从宽度为 500 像素的计算机屏幕上查看它，而设置的宽度为 1000 像素。因此，您需要滚动（从左向右移动）设置才能看到其中的更多字符。
I hope that helps anyone who was lost on the principle.
我希望能帮助那些迷失在原则上的人。
