图片底部的文本

Question

如何表达"Hello World!“文本是否始终位于图像的右侧和底部？它是一个纯粹的CSS/flexbox解决方案，还是Bulma本身提供了一个类来实现这一点。另外，我应该使用<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>

​

Answer 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>

​

Answer 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>

​