图片底部的文字答案

【问题标题】：Text at bottom of image图片底部的文字
【发布时间】：2018-05-31 21:13:32
【问题描述】：

如何输入“Hello World！”文字总是在图像的右侧和底部？它是纯 CSS/flexbox 解决方案，还是 Bulma 本身提供了一个类来做到这一点。另外，我应该使用<p> 标签吗？或者为此目的的另一个标签？因为目前如果您运行 sn-p（在全窗口中），您会看到文本已经在右侧，但它是垂直居中而不是在底部

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />

<div class="level">
  <div class="level-left">
    <div class="level-item">
      <figure class="image is-128x128">
        <img src="https://bulma.io/images/placeholders/256x256.png">
      </figure>
    </div>
    <div class="level-item justify-content-end">
      <p>Hello World!</p>
    </div>
  </div>
</div>

【问题讨论】：

标签： css bulma

【解决方案1】：

您可以简单地使用margin-top:auto

.justify-content-end {
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />

<div class="level">
  <div class="level-left">
    <div class="level-item">
      <figure class="image is-128x128">
        <img src="https://bulma.io/images/placeholders/256x256.png">
      </figure>
    </div>
    <div class="level-item justify-content-end">
      <p>Hello World!</p>
    </div>
  </div>
</div>

【讨论】：

您的 sn-p 与 OP 有何不同？从视觉上看，结果完全一样......我错过了什么？
@JeremyThille 检查全屏 ;)

【解决方案2】：

align-self: flex-end 怎么样，为了坚持使用 Flex 属性？

.justify-content-end {
    align-self: flex-end;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />

<div class="level">
  <div class="level-left">
    <div class="level-item">
      <figure class="image is-128x128">
        <img src="https://bulma.io/images/placeholders/256x256.png">
      </figure>
    </div>
    <div class="level-item justify-content-end">
      <p>Hello World!</p>
    </div>
  </div>
</div>

【讨论】：