Question

我想和他们下面的标题并排放置几张照片。但是，有一些限制。我只能使用HTML5（没有弃用的标签），也没有CSS。

我想出了一张桌子：

<p id="demo"></p>

但我的老师不要我使用桌子。

我尝试使用两个块但是垂直放置图片。我也尝试将所有图像放在同一个块中，但结果相同。

我发现我可以使用连续的标签将图像并排放置，但我不知道如何为其添加标题。

是否可以仅使用HTML5（没有CSS）和没有表格来执行此操作？或者我应该单独使用图片并省略字幕？

任何帮助将不胜感激！谢谢！

更新

我最终将图片并排放置，然后放在我放置的图片

<table>
    <tr>
        <td><img src="images/michaelJordan2.jpg" 
            alt="Michael Jordan" title="Michael Jordan" /></td>
        <td><img src="images/jamesWorthy3.jpg" alt="James Worthy" 
            title="James Worthy" /></td>
        <td><img src="images/deanSmith3.jpg" 
            alt="Dean Smith" title="Dean Smith" /></td>
        <td><img src="images/royWilliams3.jpg" alt="Roy Williams" 
            title="Roy Williams" /></td>
    </tr>
    <tr>
        <td>Michael Jordan</td>
        <td>James Worthy</td>
        <td>Dean Smith</td>
        <td>Roy Williams</td>
    </tr>
</table>

我必须保存CSS的单个字幕。感谢您的所有投入！

Answer 1

使用＆lt; figure＆gt;可以实现这一点。包装图像/标题，但是在图像下面加上标题是另一个挑战。您可以使用&38;nbsp;作弊，但我不确定您是否拥有该选项。 <figure> <img src="https://www.gravatar.com/avatar/b805558f5db9300807f0865d59d238e3/?default=&s=160" /> <img src="https://www.gravatar.com/avatar/b805558f5db9300807f0865d59d238e3/?default=&s=160" /> <figcaption>caption 1,         8nbsp; caption 2</figcaption> </figure>
js fiddle

Answer 2

Tl; DR ：仅使用图片。

我想和他们下面的标题并排放置几张照片。 仅限HTML

由于您需要并排（没有CSS且没有<table>元素），因此使用HTML5 <figure>是不可能的，因为它是块< / strong> -level元素和项目将垂直对齐显示。

所以<figure> 在游戏中。

默认情况下，我们找不到内嵌块的HTML元素：<button>

<button> <img src="//placehold.it/90x120/0bf" alt="Lorem ipsum" title="Lorem ipsum"> <br> Lorem ipsum </button> <button> <img src="//placehold.it/90x120/f0b" alt="Dolor sit" title="Dolor sit"> <br> Dolor sit </button> <button> <img src="//placehold.it/90x120/fb0" alt="Amet consectetur" title="Amet consectetur"> <br> Amet consectetur </button>

愚蠢的解决方案。

好的，<span>怎么样？ Nope。你不能。 <span>为inline。

<span> <img src="//placehold.it/90x120/0bf" alt="Lorem ipsum" title="Lorem ipsum"> <br> Lorem ipsum </span> <span> <img src="//placehold.it/90x120/f0b" alt="Dolor sit" title="Dolor sit"> <br> Dolor sit </span> <span> <img src="//placehold.it/90x120/fb0" alt="Amet consectetur" title="Amet consectetur"> <br> Amet consectetur </span>

好的，所以我不能使用<button>因为它很傻，我不能使用任何inline元素，所以我该怎么办？

<img src="//placehold.it/90x120/0bf" alt="Lorem ipsum" title="Lorem ipsum"> <img src="//placehold.it/90x120/f0b" alt="Dolor sit" title="Dolor sit"> <img src="//placehold.it/90x120/fb0" alt="Amet consectetur" title="Amet consectetur">

...回答你的问题：

或者我应该只使用图片并省略字幕？

好的，很明显我有一些表格数据。 是的，你做，所以使用<table>：

<table> <tr> <td> <img src="//placehold.it/90x120/0bf" alt="Lorem ipsum" title="Lorem ipsum"> </td> <td> <img src="//placehold.it/90x120/f0b" alt="Dolor sit" title="Dolor sit"> </td> <td> <img src="//placehold.it/90x120/fb0" alt="Amet consectetur" title="Amet consectetur"> </td> </tr> <tr> <td>Lorem ipsum</td> <td>Dolor sit</td> <td>Amet consectetur</td> </tr> </table>

带有字幕的并排图像仅使用html5（没有css或表格）

2 个答案: