我正在尝试给这个元素添加样式:
<div class="figure">
<img src="/some/image.jpg">
<p class="caption">
<span class="caption-text">Some caption of any length</span>
</p>
</div>
为了让标题在与图片同宽的阴影框中,需要注意的是.figure
有时可能在表格中的<td>
内,如果有这种情况。此外,它不应超过父元素的宽度(必要时缩小图像)。
以下是目前的内容:
.caption-text {
font-size: 14px;
font-family: Lato, proxima-nova, 'Helvetica Neue', Arial, sans-serif;
font-weight: normal;
line-height: 0px;
}
.figure {
max-width: 100%;
display: inline-block;
position: relative;
}
.figure img {
vertical-align: top;
margin-bottom: 3px;
}
.caption {
display: block;
width: 100%;
position: absolute;
padding: 10px;
background-color: #e3e3e3;
box-sizing: border-box;
margin: 0;
}
<div style="width:500px">
<h1>Some Title</h1>
<!--part I want to style-->
<div class="figure">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
<p class="caption">
<span class="caption-text">Some caption of any length. Should wrap and push content down when longer than the image.</span>
</p>
</div>
<p>Some text which should always go below the caption. When positioned absolutly the caption overlays this text, instead of pushing it down below.</p>
</div>
.caption
设为position:absolute;
会使它不再影响其他元素的流动,因此它会覆盖在其下方的内容而不是将其向下推。由于html标记是自动生成的,我无法对其进行任何编辑,因此我想知道是否可以使用纯CSS实现这一点。
figure img
选择器中添加display: block
属性,问题得以解决。 - Malvineous