1

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

我要做的就是将一排缩略图放在一行中。这里提到的white-space和display:inline 东西不起作用。

因此，代码将显示在我上面的网站上，我什至在尝试 kludgy 之类的table东西table-cell。这会将缩略图放在一行中，但不显示水平滚动条（我希望缩略图行是其上方大图像的最大宽度）。该 overflow-x: scroll指令什么也没做。

问题：

  1. 不使用表格和表格单元是否可以达到这种预期效果？我确实希望这是“响应式”，并且不知何故我觉得表格的东西可能无法在移动屏幕上工作。

  2. 无论哪种方式，我怎样才能让水平条显示？

非常感谢您的任何想法！

编辑：这里也添加了代码：

该页面上的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; }

这会在一行中显示缩略图，但没有水平滚动。

谢谢！

4

1 回答 1

6

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

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

.thumbnails { display: block; overflow-x: scroll; white-space: nowrap; }

你会得到这个：

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

干杯!

于 2012-05-12T06:58:11.260 回答