HTML – 图像标题和包装

概述在图像下方添加标题的最佳方法是什么？图像及其标题将向右浮动,标题上的文字需要换行 – 200x200px图像的标题宽度不应为800px. 我非常喜欢一种允许我更新图像(具有不同宽度)而无需更改CSS或标记的解决方案. 由于我无法控制的原因,图像本身也会浮动,但这不应该太成问题. 图像代码是 <div class="floatright"> <img alt="foo" src="bar.png 在图像下方添加标题的最佳方法是什么？图像及其标题将向右浮动,标题上的文字需要换行 – 200x200px图像的标题宽度不应为800px.

我非常喜欢一种允许我更新图像(具有不同宽度)而无需更改CSS或标记的解决方案.

由于我无法控制的原因,图像本身也会浮动,但这不应该太成问题.

图像代码是

<div >  <img alt="foo" src="bar.png" height="490" border="0" wIDth="800"></div>

我可以根据需要用HTML / CSS包装它.这个页面上没有Js.

解决方法

figure {  display: table;}figcaption {  display: table-caption;  caption-sIDe: bottom;}

<figure>  <img src="http://lorempixel.com/300/100/" />  <figcaption>This is a caption of slightly longer length. It should wrap,regardless of the size of the image.</figcaption></figure>

你可以用div和p替换figure和figcaption,或者用其他任何容器代替浮动你的语义船.

无耻的插件：如果你有兴趣,我在博客上写了这个问题和my solution here.

总结

以上是内存溢出为你收集整理的HTML – 图像标题和包装全部内容，希望文章能够帮你解决HTML – 图像标题和包装所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。