html - 使内容在 div 内水平滚动

Question

我有一个部门，我想在其中显示图像，然后单击在灯箱中打开它们。我将它们向左浮动并内联显示。将 overflow-x 设置为滚动，但一旦行空间不足，它仍将图像放在下方。我想让它们内联并在需要时显示水平滚动条。

注意:我无法更改内部图像的结构。它必须是 anchor 内的 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);
});