所有代码都在这里内联: http://shanxinc.com/test/fancybox2/
我要做的就是将一行缩略图放入一行。 white-space
和display:inline
stuff mentioned here无效。
因此,代码将显示在我的网站上面,我甚至尝试了kludgy table
和table-cell
这些东西。这会将缩略图放在一行中,但不会显示水平滚动条(我希望缩略图行是其上方大图像的最大宽度)。 overflow-x: scroll
指令什么都不做。
问题:
是否可以在不使用表格和表格单元的情况下实现此效果?我确实希望这是“响应”,不知何故,我觉得桌面的东西可能不适用于移动屏幕。
无论哪种方式,我怎样才能显示水平条?
非常感谢任何想法!
编辑:此处也添加了代码:
该页面上的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; }
这会在一行中显示缩略图,但不会显示水平滚动。
谢谢!
答案 0 :(得分:6)
您可以按照以下步骤执行此操作:
<br>
元素display
的{{1}}规则从.thumbnails
更改为table
: block
你会得到这个:
http://oi48.tinypic.com/audpba.jpg
干杯!