0

所以我在罐头图像中拥有的东西。我想要的是，在 HTML 中，让文本直接出现在这个罐子下面。罐头左侧和下方还有其他文字，以常规方式显示

形式。

这就是我所拥有的：

<img src="URL" alt=" align="right" border="0px">

<p class="MsoNormal" style="margin-bottom: 6pt;"><span style="font-size: 20.5pt; font-family: Helvetica, sans-serif;"><span style="font-weight: bold; color: rgb(0, 0, 205);">(header)</span></span></p>

<p class="MsoNormal" style="margin-bottom: 12pt;"><span style="font-size: 14pt;"><span style="font-family: Helvetica, sans-serif; color: rgb(51, 51, 51); font-size: 14pt;">(paragraph)</span></span></p>

这里的标题和段落是与罐子本身有关的内容。我需要的是直接在那个罐子下面的文本。谢谢你。

4

2 回答 2

2

将您的图像及其随附的文本放入其中，例如 div 元素。

<div class="img-wrapper">
    <img src="" alt="" />
    <p class="img-desc">(Image caption)</p>
</div>

然后设置您的样式：

<style>
    .img-wrapper {
        float: right;
        margin: 0 0 0.5em 1em;
    }
    img {
        display: block;
        margin: 0 auto;
    }
    .img-desc { text-align: center; }
</style>

你真的应该避免在每个元素中设置“内联”样式。这使得代码更难维护。您不需要使用这些跨度元素，只需参考 p 元素上的类来设置文本的所有样式。

于 2013-05-09T02:18:04.473 回答
0

在 HTML 中，似乎实现结果的唯一方法是使用表格，img例如将元素替换为

<table align=right>
<tr><td><img src="URL" alt="...">
<tr><td>Text under the image
</table>

使用 CSS，其他替代方案也是可能的。

于 2013-05-09T07:38:49.617 回答