使内容在div中水平滚动

小编典典

使内容在div中水平滚动

css

我有一个部门想要显示图像，然后单击以在灯箱中打开它们。我将它们向左浮动并在线显示它们。设置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
}

我知道这是非常基本的，但是我做不到。不知道怎么了

阅读 341

2020-05-16

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

2020-05-16