使用水平滚动条将缩略图图像放在一行中

时间:2012-05-12 06:34:02

标签: css scroll

所有代码都在这里内联: http://shanxinc.com/test/fancybox2/

我要做的就是将一行缩略图放入一行。 white-spacedisplay:inline stuff mentioned here无效。

因此,代码将显示在我的网站上面,我甚至尝试了kludgy tabletable-cell这些东西。这会将缩略图放在一行中,但不会显示水平滚动条(我希望缩略图行是其上方大图像的最大宽度)。 overflow-x: scroll指令什么都不做。

问题:

  1. 是否可以在不使用表格和表格单元的情况下实现此效果?我确实希望这是“响应”,不知何故,我觉得桌面的东西可能不适用于移动屏幕。

  2. 无论哪种方式,我怎样才能显示水平条?

  3. 非常感谢任何想法!


    编辑:此处也添加了代码:

    该页面上的html代码非常简洁,因此您可以查看源代码?

    这是HTML:

     <div class="holder">
          <img src="demo/img1.jpg" alt="" width="600" height="350">
          <div class="thumbnails">
              <a class="fancybox" rel="group" href="demo/img1.jpg" title="Exciting Title!"><img src="demo/img1s.jpg" alt="" class="thumb"></a>
                    <a class="fancybox" rel="group" href="demo/img4.jpg" title="Bonjour!!"><img src="demo/img4s.jpg" alt="" class="thumb"></a>
                    <a class="fancybox" rel="group" href="demo/img2.jpg" title="Yup, More Text.."><img src="demo/img2s.jpg" alt="" class="thumb"></a><br />
                    <a class="fancybox" rel="group" href="demo/img3.jpg" title="Yelf Up."><img src="demo/img3s.jpg" alt="" class="thumb"></a>
                    <a class="fancybox" rel="group" href="demo/img2.jpg" title="Yup, More Text.."><img src="demo/img2s.jpg" alt="" class="thumb"></a><br />
                    <a class="fancybox" rel="group" href="demo/img3.jpg" title="Yelf Up."><img src="demo/img3s.jpg" alt="" class="thumb"></a>
              <a class="fancybox" rel="group" href="demo/img1.jpg" title="Exciting Title!"><img src="demo/img1s.jpg" alt="" class="thumb"></a>
                    <a class="fancybox" rel="group" href="demo/img2.jpg" title="Yup, More Text.."><img src="demo/img2s.jpg" alt="" class="thumb"></a><br />
                    <a class="fancybox" rel="group" href="demo/img4.jpg" title="Bonjour!!"><img src="demo/img4s.jpg" alt="" class="thumb"></a>
              <a class="fancybox" rel="group" href="demo/img1.jpg" title="Exciting Title!"><img src="demo/img1s.jpg" alt="" class="thumb"></a>
                    <a class="fancybox" rel="group" href="demo/img3.jpg" title="Yelf Up."><img src="demo/img3s.jpg" alt="" class="thumb"></a>
                    <a class="fancybox" rel="group" href="demo/img4.jpg" title="Bonjour!!"><img src="demo/img4s.jpg" alt="" class="thumb"></a>
          </div>
    </div>
    

    这是我尝试的旧CSS,使用display: inline

    无效
    .holder { width: 600px; display: block;  }
    .thumbnails { display: block; overflow-x: scroll !important; height: 75px; white-space: nowrap; }
    .thumbnails a { display: inline; width: 75px; height: 50px; float: left; }
    .thumbnails a .thumb { width: 75px; height: 50px; display: inline; }
    

    以下是我现在正在尝试的内容:

    .holder, .thumbnails { width: 600px; }
    .thumbnails { display: table; overflow-x: scroll; white-space: nowrap; }
    .thumbnails a { display: table-cell; padding-right: 2px  }
    .thumbnails a .thumb { width: 75px; height: 50px; }
    

    这会在一行中显示缩略图,但不会显示水平滚动。

    谢谢!

1 个答案:

答案 0 :(得分:6)

您可以按照以下步骤执行此操作:

  1. 删除所有<br>元素
  2. 将CSS类display的{​​{1}}规则从.thumbnails更改为table
  3. block

    你会得到这个:

    http://oi48.tinypic.com/audpba.jpg

    干杯!