使内容在div内水平滚动
我有一个部门，我想要显示图像，并点击在Lightbox中打开它们。 我已经将它们左移，并将它们显示为内联。 设置overflow-x滚动，但是一旦行空间不够，它仍然会把图像放在下面。 我想让他们内联，并在需要时显示一个水平滚动。
注：我不能改变里面的图像的结构。 它必须是一个锚内的img。 我的灯箱需要这样的。
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：
#myWorkContent{ width:530px; height:210px; border: 13px solid #bed5cd; overflow-x: scroll; overflow-y: hidden; } #myWorkContent a { display: inline; float:left }
我知道这是非常基本的，但我无法完成。 不知道什么是错的。
在HTML中可能是这样的：
<div class="container-outer"> <div class="container-inner"> <!-- Your images over here --> </div> </div>
有了这个样式表：
.container-outer { overflow: scroll; width: 500px; height: 210px; } .container-inner { width: 10000px; }
你甚至可以创build一个智能脚本来计算内部容器的宽度，就像这样：
$(document).ready(function() { var container_width = SINGLE_IMAGE_WIDTH * $(".container-inner a").length; $(".container-inner").css("width", container_width); });
如果从a删除float: left并将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; }
这应该适用于任何大小或数量的图像..
甚至：
#myWorkContent a { display: inline-block; vertical-align: middle; }
如果需要，也可以垂直alignment不同高度的图像
testing代码
问题是你的img会因为包含div而总是碰到下一行。
为了解决这个问题，你需要将img放在自己的div ， width足以容纳所有的div 。 那么你可以使用你的样式。
所以，当我把img s设置为每个120px并把它们放在一个
div#insideDiv{ width:800px; }
这一切工作。
根据需要调整宽度。
与clairesuzy的回答一样，除了通过添加display: flex可以得到类似的结果display: flex而不是white-space: nowrap 。 使用display: flex会折叠img的“边距”，以防止这种行为是首选。
@ marcio初级的答案（ https://stackoverflow.com/a/6497462/4038790 ）完美的作品，但我想解释给那些不明白为什么它的作品：
@ a7omiton随着@ psyren89对你的问题的回应
将外部div看作电影屏幕，将内部div看作人物电影的设置。 如果您正在亲自观看该设置，那么周围没有屏幕，您将可以一次看到所有的angular色，因为您的眼睛有足够大的视野。 这将意味着设置将不必滚动（从左到右），以便您看到更多，因此它会保持不动。
但是，您并不是亲自设置的，您正在从宽度为500px的计算机屏幕上查看它，而设置的宽度为1000px。 因此，您需要滚动（从左到右）设置，以便查看更多的字符。
我希望能帮助任何在原则上失去的人。
