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>

图像底部的文字

2 个答案: