我有一个问题,figcaption
比 img
宽,因此突出到它的右边。我对标题的 width
进行了硬编码并且它有效,但仅适用于相同宽度的图像。
HTML
<figure>
<img src="http://i.imgur.com/tVeUqlH.jpg"/>
<figcaption>Vader enjoying the beach.</figcaption>
</figure>
CSS
figure {
border: 1px solid black;
display: inline-block;
padding: 3px;
margin: 10px;
}
figure img {
vertical-align: top;
}
figcaption {
text-align: center;
border: 1px dotted blue;
width: 120px;
}
最佳答案
您可以使用display: table-caption;
。
.imagecaption {
padding: 3px;
margin: 10px;
float: left;
border: 1px solid black;
}
figure {
display: table;
margin: 0px;
}
figure img {
display: block;
}
figcaption {
display: table-caption;
caption-side: bottom;
text-align: center;
border: 1px dotted blue;
}
<div class="imagecaption">
<figure>
<img src="http://i.imgur.com/tVeUqlH.jpg"/>
<figcaption>Vader enjoying the beach.</figcaption>
</figure>
</div>
关于html - Figcaption 不比图像宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28394007/