所以我所拥有的是一个罐头的形象。我想要的是,在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>
此处的标题和段落是与本身有关的内容。我需要的是直接在其下面的文字。 谢谢。
答案 0 :(得分: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>
你应该避免在每个元素中设置“内联”样式。这使得代码难以维护。您不需要使用这些span-elements,只需引用p元素上的类来设置文本的所有样式。
答案 1 :(得分:0)
在HTML中,似乎实现结果的唯一方法是使用表格,替换img
元素,例如由
<table align=right>
<tr><td><img src="URL" alt="...">
<tr><td>Text under the image
</table>
使用CSS,other alternatives也是可能的。