将内容水平滚动到div内 [英] Make content horizontally scroll inside a div

问题描述

我有一个部门，我想显示图像，并点击打开他们在灯箱。我把它们悬浮在左边，并显示在线。设置overflow-x滚动，但如果行空间不够，它仍然会把图像放在下面。

注意：我无法更改内部图像的结构。它必须是一个锚在内部的img。

HTML：

 < div id =myWorkContent> 
< a href =assets / work / 1.jpg>< img src =assets / work / 1.jpgheight =190/>< / a> 
< a href =assets / work / 2.jpg>< img src =assets / work / 2.jpgheight =190/>< / a> 
< a href =assets / work / 3.jpg>< img src =assets / work / 3.jpgheight =190/>< / a> 
< a href =assets / work / 4.jpg>< img src =assets / work / 4.jpgheight =190/>< / a> 
< a href =assets / work / 5.jpg>< img src =assets / work / 5.jpgheight =190/>< / a> 
< a href =assets / work / 6.jpg>< img src =assets / work / 6.jpgheight =190/>< / a> 
< / div><！ -  end myWorkContent  - > 
  

CSS：

 code> #myWorkContent {
 width：530px; 
 height：210px; 
 border：13px solid＃bed5cd; 
 overflow-x：scroll; 
 overflow-y：hidden; 
} 
 #myWorkContent a {
 display：inline; 
 float：left 
} 
  

我知道这是非常基本的，但我只是不能得到它。

解决方案

在HTML中可能是这样的：

 < div class =container-outer> 
< div class =container-inner> 
<！ - 您的图片在这里 - > 
< / div> 
< / div> 
  

使用此样式表：

  .container-outer {overflow：scroll; width：500px; height：210px; } 
 .container-inner {width：10000px; } 
  

您甚至可以创建一个智能脚本来计算内部容器宽度， p>

  $（document）.ready（function（）{
 var container_width = SINGLE_IMAGE_WIDTH * $（。container-inner a ）.length; 
 $（。container-inner）css（width，container_width）; 
}）; 
  

I have a division in which I wanna show images and on click open them in a lightbox. I have floated them left and displayed them inline. set overflow-x to scroll but it still puts the images below once the row space is not enough. I wanna get them to be inline and display a horizontal scroll when needed.

NOTE: I can't change the structure of the images inside. It has to be a img inside an anchor. My lightbox requires it like that.

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
}

I know this is very basic but I just can't get it done. Don't know what's wrong.

解决方案

It may be something like this in HTML:

<div class="container-outer">
   <div class="container-inner">
      <!-- Your images over here -->
   </div>
</div>

With this stylesheet:

.container-outer { overflow: scroll; width: 500px; height: 210px; }
.container-inner { width: 10000px; }

You can even create an intelligent script to calculate the inner container width, like this one:

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

这篇关于将内容水平滚动到div内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！