如何用CSS实现图片与文本的垂直分栏对齐？

嘿，我来帮你搞定这个图片和文本分栏对齐的布局问题！

从你提供的截图和代码来看，要实现图片一列、文本一列的垂直分栏效果，用Flexbox是最简洁高效的方案，比你之前尝试的inline-block更易控制，还能轻松解决对齐问题。

具体解决方案 #

首先，我们可以微调一下HTML结构让布局逻辑更清晰，再通过CSS的Flex布局实现分栏效果：

第一步：整理HTML结构

给文本部分单独加一个容器，方便统一控制样式：

<div class="achievements">
  <div class="achievement1">
    <img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118">
    <div class="text-block">
      <a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"How I Turned $1,200 into Multi-Million Dollar Businesses"</a>
      <a href="https://www.businessnewsdaily.com/">- Business News Daily</a>
    </div>
  </div>
  <!-- 另外两个.achievement1容器同理 -->
</div>

第二步：添加CSS代码

/* 父容器：控制多个成就项的垂直排列和间距 */
.achievements {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 成就项之间的垂直间距，可按需调整 */
}

/* 单个成就项：开启Flex布局实现图片+文本分栏 */
.achievement1 {
  display: flex;
  align-items: center; /* 让图片和文本垂直居中对齐，匹配截图效果 */
  gap: 15px; /* 图片和文本之间的水平间距，可按需调整 */
}

/* 图片：固定尺寸，防止被压缩 */
.achievement1 img {
  flex-shrink: 0;
  width: 161px;
  height: 118px;
}

/* 文本区块：自适应剩余宽度，内部垂直排列 */
.text-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px; /* 两行文本之间的小间距 */
}

代码说明 #

• display: flex：给.achievement1开启Flex布局后，内部的图片和文本容器会自动排成水平两列，无需手动处理inline-block的间隙问题。
• align-items: center：让图片和文本在垂直方向上居中对齐，完美贴合截图的视觉效果；如果想要顶部对齐，改成align-items: flex-start即可。
• flex: 1：让文本区块自动占据剩余的所有宽度，确保文本不会被图片挤压变形。
• gap属性：用来快速设置元素间的间距，比传统的margin更简洁，不会出现外边距重叠的问题。

这样设置后，就能轻松实现你想要的图片一列、文本一列的分栏布局啦！

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