html - 如何阻止 Pure Grid Div 图像下的文本被压扁
问题描述
我正在使用 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>
解决方案
您是否包含纯响应式网格所需的 CSS 文件?
a
在您的代码中, anddiv
标记缺少结尾。关闭这些标签后一切正常:
<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>
推荐阅读
- java - 将 CheckBox 视图定义为 java 文件中的全局变量会使应用程序在 Android Studio 中终止
- php - 比较没有大小写敏感性检查的字符串
- c# - 为什么线程 2 不可用?
- json - SQL Server 的 JSON 输出格式
- excel - 循环遍历范围内的单元格,检查条件并将结果保存在不同的 s/s 上
- python - mongodb 中的 $and 查询不返回结果
- java - 无法在java中实例化类
- php - 显示具有固定指数值的 php 浮点值
- three.js - 如何从 new THREE.BufferGeometryLoader() 全局查看对象
- android - 当可访问性打开时,如何更改/覆盖复选框内容描述值?