如何在Vue+Buefy中实现图片与文字并排且图片居右？

你当前的代码里文字和图片都在同一个column容器内，所以是上下堆叠的布局。要实现图片在文字右侧的效果，只需要利用Bulma的columns布局系统，将文字和图片分别放在两个独立的column中即可，Bulma的列默认是横向排列的。

修改后的代码如下：

<template>
  <section class="hero is-link is-fullheight-with-navbar">
    <div class="hero-body">
      <div class="container is-max-desktop">
        <!-- 保持垂直居中的列容器 -->
        <div class="columns is-vcentered is-variable is-8">
          <!-- 左侧列：放置文字内容 -->
          <div class="column">
            <p class="title">
              释放你的创造力
            </p>
            <p class="subtitle">
              Kaplash是帮助你实现代码和模块化编程梦想的首选工具。
            </p>
          </div>
          <!-- 右侧列：放置图片 -->
          <div class="column">
            <b-image
              src="https://media.discordapp.net/attachments/999131353033482322/1017389226138009650/unknown.png"
              ratio="16by9"
              @load="onLoad1"
            ></b-image>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

关键改动说明： #

• 将原来单个column拆分为两个column，分别承载文字和图片，实现左右排列
• 保留is-vcentered确保两列内容垂直居中对齐
• 添加is-8调整列之间的间距（你可以根据需求换成其他数值，比如is-6）
• 把原文的英文文案翻译成了中文，若不需要可自行改回

内容的提问来源于stack exchange，提问作者Mapler