如何让段落正确显示在图片右侧？解决flex布局间距问题

问题根源 #

你当前的代码有几个关键问题导致了空白：

• 直接给img设置width:60%，但它的父容器.center_img没有定义宽度，flex布局下这个容器会默认收缩或拉伸，导致图片实际占比不符合预期
• float:left在flex容器里完全无效，属于多余代码
• .text设了width:50%，加上图片容器的隐性宽度，总宽度超过flex容器，导致布局错位出现空白

修复方案 #

修改你的CSS代码如下：

.center {
  padding: 10px 10px;
  background-color: #c2e7f0;
  margin-top: 15px
}

.all {
  display: flex;
  padding: 20px;
  /* 可选：如果需要图片和文字间留小间隙，设置gap，不需要就设0 */
  gap: 15px;
}

.center_img {
  /* 定义图片容器的宽度，根据需求调整，比如40% */
  width: 40%;
}

.center_img img {
  /* 让图片占满父容器宽度 */
  width: 100%;
  /* 保持图片比例不变 */
  object-fit: cover;
}

.text {
  /* 让文字容器占剩余全部空间，比固定宽度更灵活 */
  flex: 1;
  font-weight: 100;
}

修复说明 #

1. 给图片的父容器.center_img设置固定宽度（比如40%），明确它在flex布局里的占比
2. 图片设为width:100%，确保填满父容器，不会出现留白
3. 文字容器用flex:1，自动占据剩余所有空间，避免固定宽度导致的布局溢出
4. 去掉无效的float:left和多余的.center的display:flex（因为.all已经是flex容器，.center不需要再设flex）
5. 用gap属性控制图片和文字间的间隙，比手动加padding/margin更符合flex布局的逻辑

这样修改后，图片和文字就能紧密排列在同一行，不会出现多余空白，和你的预期效果一致。

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