html-使内容在di中水平滚动

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

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

Aayush asked 2019-11-07T06:20:41Z
5个解决方案
85 votes

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);
});
Daniel O'Hara answered 2019-11-07T06:21:12Z
75 votes

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

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

测试代码

clairesuzy answered 2019-11-07T06:22:03Z
1 votes

问题是您的imgs总是会由于包含120px而下降到下一行。

为了解决这个问题,您需要将26033212486000600032256s放在自己的120px中,其width的宽度足以容纳所有这些。 然后,您可以按原样使用样式。

因此,当我将imgs分别设置为120px并将其放置在

div#insideDiv{
    width:800px;
}

一切正常。

根据需要调整宽度。

参见[http://jsfiddle.net/jasongennaro/8YfRe/]

Jason Gennaro answered 2019-11-07T06:23:06Z
1 votes

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

papiro answered 2019-11-07T06:23:32Z
0 votes

@ marcio-junior的答案([https://stackoverflow.com/a/6497462/4038790)]完美地工作,但是我想为那些不明白为什么工作的人解释一下:

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

将外部div视为电影屏幕,将内部div视为角色在其中移动的设置。 如果您亲自查看设置,即周围没有屏幕,则假设您的眼睛具有足够大的视野,则可以一次看到所有字符。 这意味着该设置无需滚动(从左向右移动)即可看到更多内容,因此它将保持静止。

但是,您不是亲自使用该设置,而是从宽度为500px的计算机屏幕上查看它,而该设置为1000px的宽度。 因此,您将需要滚动(从左向右移动)该设置,以查看其中的更多字符。

我希望这对那些在原则上迷路的人有所帮助。

lwdthe1 answered 2019-11-07T06:24:28Z
translate from https://stackoverflow.com:/questions/6497373/make-content-horizontally-scroll-inside-a-div