使内容在div内水平滚动

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

如果需要,它还可以垂直对齐不同高度的图像

测试代码