Question

我有很多相同尺寸的照片，我想用它们进行幻灯片放映，所以他们必须在一行，也许这行的宽度大于窗口的宽度，我想要一些图片走出屏幕，而不是他们进入下一行。在此之前我使用表格将它们排成一行，我只是移动了表格进行幻灯片放映。 [像这样：]

<table cellspacing="0" cellpadding="0">
   <img src="..." />
   <img src="..." />
   <img src="..." />
   <img src="..." />
   <img src="..." />
   <img src="..." />
   ...
</table>

但我想使用另一个元素[例如一个带有一些CSS规则的div，它具有类似于该表的属性]因为table在我的页面中出现了一些问题。

Answer 1

具有最少代码且没有“黑客”的解决方案。

<div style="white-space:nowrap;">
       <img src="..." />
       <img src="..." />
       <img src="..." />
       <img src="..." />
       <img src="..." />
       <img src="..." />
       ...
    </div>

<强> DEMO

Answer 2

最常见的是，在这种滑块插件中使用了无序列表。

<ul>
   <li><img .../></li>
   <li><img .../></li>
   <li><img .../></li>
</ul>

带

li{float:left;}

这样做的好处是，您可以将更多元素添加到<li>元素中（例如图像+说明+短文本）。

但你也可以使用普通的div

<div>
  <img />
  <img />
</div>

如果您想要将更多元素组合在一起（例如图像的解释），您必须使用其他div包装它们。（这有效地带你回到ul ...）

<div>
  <div><img /> Text</div>
  <div><img /> more Text</div>
</div>

只是为了您的信息，使用表格的正确方法是：

<table>
   <tr>        <!-- the row -->
     <td></td> <!-- columns -->
     <td></td> <!-- columns -->
   </tr>
</table>

Answer 3

嘿，现在习惯了这种格式

<div class="slideshow">
   <img src="..." />
   <img src="..." />
   <img src="..." />
   <img src="..." />
   <img src="..." />
   <img src="..." />
   ...
</div>

<强>的CSS

.slideshow{
white-space: nowrap;
}
.slideshow img{
vertical-align:top;
}

我可以使用哪个元素而不是具有相同属性的表？

3 个答案: