我正在使用 CSS 纯网格类制作图像网格,并在每个图像下方放置一个文本标签。然而,这是行不通的,因为文本被压扁了(见下图):
这是我的代码:
<div class="pure-g" style="margin-top:90px; margin-left:200px">
<div class="pure-u-lg-1-4 pure-u-md-1-2 pure-u-sm-1" style="margin-right:50px">
<a href="#" class="thumbnail">
<img src="sample_image.jpg" width=200px>
<center>
<span class="caption" style="color:black" > <br> My Text Under Image</span>
</center>
<br>
</div>
最佳答案
您是否为 pure responsive grids 添加了必要的 CSS 文件? ?
在您的代码中,a
和 div
标记缺少结尾。关闭这些标签后一切正常:
<link href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" rel="stylesheet"/>
<link href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css" rel="stylesheet"/>
<div class="pure-g" style="margin-top:90px; margin-left:200px">
<div class="pure-u-lg-1-4 pure-u-md-1-2 pure-u-sm-1" style="margin-right:50px">
<a href="#" class="thumbnail">
<img src="sample_image.jpg" width=200px>
<center>
<span class="caption" style="color:black" > <br> My Text Under Image</span>
</center>
<br>
</a>
</div>
</div>
关于html - 如何阻止 Images of Pure Grid Div 下的文本被压扁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50651172/