如何阻止 Pure Grid Div 图像下的文本被压扁答案

【问题标题】：How to stop the text under Images of Pure Grid Div from getting Squashed如何阻止 Pure Grid Div 图像下的文本被压扁
【发布时间】：2018-06-09 04:08:21
【问题描述】：

我正在使用 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>

【问题讨论】：

<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> 就足够了。第一类处理小屏幕尺寸。这里不需要使用 pure-u-sm-1 类。您还需要关闭标记。

标签： html css yui-pure-css

【解决方案1】：

您是否包含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>

【讨论】：

为纯响应式网格添加 CSS 文件修复了它