Bulma框架技术问题：如何实现文字与图片inline并排显示？

阿华AIGC实验室

2026-5-25

解决Bulma框架下图片与文字并排显示的问题

嘿，我来帮你搞定这个图片和文字并排的问题！你之前用自定义float的方式没成功，大概率是因为Bulma本身有一套完整的布局系统，自定义样式容易和它的内置规则冲突。其实用Bulma自带的columns布局组件就能轻松实现需求，而且还能自动适配响应式场景，比自己写float靠谱多了。

正确实现代码示例

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" type="text/css" rel="stylesheet">

<div class="container is-info">
  <!-- 使用Bulma的columns容器实现并排布局 -->
  <div class="columns is-vcentered"> <!-- is-vcentered让内容垂直居中 -->
    <!-- 图片容器，占50%宽度 -->
    <div class="column is-half">
      <img src="https://i.imgur.com/你的图片链接.jpg" style="height: 25em; object-fit: cover;" alt="描述图片内容">
    </div>
    <!-- 文字内容容器，占剩余50%宽度 -->
    <div class="column is-half">
      <div class="content">
        这里放你的文字内容啦，比如段落、标题之类的，现在就能和左边的图片完美并排了！
      </div>
    </div>
  </div>
</div>

关键知识点说明

columns与column：这是Bulma的核心布局组件，columns是父容器，里面的每个column会自动平分宽度，用is-half可以指定每个容器占50%宽度，刚好符合你要的左右各半的需求。
is-vcentered：这个类能让两列的内容垂直居中对齐，避免图片和文字上下错位的问题。
object-fit: cover：给图片加上这个样式，可以保证图片在固定高度下不会变形，自动裁剪多余部分来保持比例，提升视觉效果。