对话气泡与侧边图片排版求助：消除间隙+响应式适配

直接替换你的CSS和HTML代码，就能实现图片贴容器侧边、文本占剩余空间居中，同时适配桌面/移动端：

.conversation {
  max-width: 75%;
  margin: auto;
}

/* 核心：用Flex布局替代float，控制行内元素排列 */
.row {
  display: flex;
  margin-bottom: 20px;
  align-items: flex-end; /* 气泡和图片底部对齐 */
}

/* 右侧消息：左对齐气泡，图片贴右侧 */
.row.right {
  justify-content: flex-end;
}
.right-msg {
  position: relative;
  flex: 1; /* 占据剩余空间 */
  max-width: calc(80% - 10px); /* 预留图片空间，减去间隙 */
  min-height: 30px;
  color: #ffffff;
  padding: 9px 9px 9px 15px;
  background: black;
  border-radius: 15px;
  margin-right: 10px; /* 气泡和图片的小间距，可调整 */
}

.right-msg:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 6px 0 6px 12px;
  border-color: transparent rgba(0,0,0,1);
  width: 0;
  z-index: 1;
  right: -8px;
  top: 6px;
}

/* 左侧消息：右对齐气泡，图片贴左侧 */
.row.left {
  justify-content: flex-start;
}
.left-msg {
  position: relative;
  flex: 1;
  max-width: calc(80% - 10px);
  min-height: 30px;
  color: #ffffff;
  padding: 9px 9px 9px 15px;
  background: rgba(66,66,66,1);
  border-radius: 15px;
  margin-left: 10px;
}

.left-msg:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 6px 12px 6px 0;
  border-color: transparent rgba(66,66,66,1);
  width: 0;
  z-index: 1;
  left: -8px;
  top: 6px;
}

/* 图片样式：固定宽度，贴紧容器侧边 */
.left-img, .right-img {
  max-width: 20%;
  flex-shrink: 0; /* 防止图片被压缩 */
}

/* 移动端适配：调整容器宽度和元素比例 */
@media (max-width: 768px) {
  .conversation {
    max-width: 95%;
  }
  .right-msg, .left-msg {
    max-width: calc(75% - 10px);
  }
  .left-img, .right-img {
    max-width: 25%;
  }
}

<div class="conversation">
  <!-- 右侧消息：row加right类，图片在最后 -->
  <div class='row right'>
    <div class='right-msg'>Msg words words words words words words words words words words words words words words words words words words words words words words words words</div>
    <img class='right-img' src="https://i.imgur.com/pXN7qwv.png">
  </div>

  <!-- 左侧消息：row加left类，图片在最前 -->
  <div class='row left'>
    <img class='left-img' src="https://i.imgur.com/pXN7qwv.png">
    <div class='left-msg'>hey words words words words words words words words words words words words words words words words words words words words words words words words</div>
  </div>

  <div class='row right'>
    <div class='right-msg'>Msg 3</div>
    <img class='right-img' src="https://i.imgur.com/pXN7qwv.png">
  </div>

  <div class='row left'>
    <img class='left-img' src="https://i.imgur.com/pXN7qwv.png">
    <div class='left-msg'>Msg Close</div>
  </div>

  <div class='row right'>
    <div class='right-msg'>Msg 4</div>
    <img class='right-img' src="https://i.imgur.com/pXN7qwv.png">
  </div>
</div>

关键修改说明： #

• Flex布局替代float：给.row设置display: flex，彻底解决float带来的间隙和清除浮动问题，通过justify-content控制元素对齐方向，让图片直接贴紧容器侧边。
• 气泡自适应剩余空间：给.right-msg和.left-msg加flex: 1，自动占据图片之外的剩余空间，同时用max-width限制宽度避免过宽。
• 图片固定比例：图片设置flex-shrink: 0防止被压缩，max-width:20%保证占比，和气泡的max-width:calc(80% - 10px)配合，刚好填满整行。
• 移动端适配：媒体查询调整容器宽度和元素比例，确保小屏上排版依然合理。
• 对齐优化：align-items: flex-end让气泡和图片底部对齐，视觉更协调。

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