如何实现图片与文本并排（右侧）？CSS布局问题求助

要实现图片在文本（含按钮）右侧的效果，你可以通过调整HTML结构并使用CSS Flexbox布局来完成，具体修改如下：

修改后的HTML代码 #

<div class="content-container">
  <div class="text-buttons">
    <div class="txt">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
    <button class="but1">Example</button>
    <button class="but2">Example</button>
  </div>
  <img src="cy.png" alt="IMG">
</div>

对应的CSS代码 #

.content-container {
  display: flex; /* 启用Flex布局，让子元素在同一行排列 */
  align-items: flex-start; /* 子元素顶部对齐，可根据需求调整为center实现垂直居中 */
  gap: 20px; /* 文本区域与图片的间距，可自定义数值 */
}

.text-buttons {
  flex: 1; /* 让文本按钮区域占据容器剩余宽度，避免图片挤压文本 */
}

代码说明 #

• 新增.content-container容器包裹文本按钮区和图片，通过display: flex实现横向排列。
• .text-buttons容器整合文本与按钮，flex: 1确保它能自适应容器宽度，防止图片压缩文本空间。
• 若需要图片与文本垂直居中，只需将.content-container内的align-items: flex-start替换为align-items: center。

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