Question

我有一个部门，我想在其中显示图像，然后单击打开它们在灯箱中。我把它们漂浮在左边并将它们显示为内联。设置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
}

我知道这是非常基本但我无法完成它。不知道出了什么问题。

Answer 1

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

您甚至可以创建一个智能脚本来计算内部容器宽度，如下所示：

$(document).ready(function() {
   var container_width = SINGLE_IMAGE_WIDTH * $(".container-inner a").length;
   $(".container-inner").css("width", container_width);
});

Answer 2

如果您从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;
}

这适用于任何尺寸或数量的图像..

甚至：

#myWorkContent a {
    display: inline-block;
    vertical-align: middle;
}

如果需要，它也会垂直对齐不同高度的图像

test code

Answer 3

问题在于，由于包含img，您的div将始终降低到下一行。

为了解决这个问题，您需要将img放在他们自己的div中，其width宽度足以容纳所有这些内容。然后你可以按原样使用你的风格。

所以，当我将img设置为120px时，将它们放在

中

div#insideDiv{
    width:800px;
}

一切正常。

根据需要调整宽度。

请参阅http://jsfiddle.net/jasongennaro/8YfRe/

Answer 4

与clairesuzy回答的内容相同，但您可以通过添加display: flex而不是white-space: nowrap来获得类似的结果。如果首选行为，使用display: flex将折叠img“边距”。

Answer 5

@ marcio-junior的回答（https://stackoverflow.com/a/6497462/4038790）完美无缺，但我想解释那些不理解其原因的人：

@ a7omiton以及@ psyren89对您的问题的回复

将外部div视为电影屏幕，将内部div视为字符移动的设置。如果您正在查看该设置，即没有围绕它的屏幕，您将能够立即看到所有角色，假设您的眼睛有足够大的视野。这意味着设置不必滚动（从左向右移动），以便您可以看到更多，因此它将保持静止。

但是，您没有亲自进行设置，您正在从宽度为500像素的计算机屏幕上查看，而设置的宽度为1000像素。因此，您需要滚动（从左向右移动）设置，以便查看其中的更多字符。

我希望能帮助那些在原则上迷失的人。

使内容在div内水平滚动

5 个答案:

test code