图像底部的文本

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

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

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