html - 我可以使用哪个元素代替具有相同属性的表格？

Question

我有许多相同大小的图片，我想将它们用于幻灯片，所以它们必须在一行中，并且可能这一行的宽度大于窗口的宽度，我想让一些图片超出屏幕而不是他们进入下一行。在此之前，我使用表格将它们排成一排，我只是移动表格来制作这张幻灯片。[像这样：]

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

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

Answer 1

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

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

演示

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;
}