如何在CSS中实现长文本不挤压固定尺寸图片且自动填充下方空间

AI 小北

2026-9-29

解决方案

本次调整无需修改现有HTML结构，仅需调整CSS代码即可实现需求。

核心调整逻辑

原有flex横向布局仅支持两个块级元素并排，右侧文本为完整矩形，无法填充图片下方空白，且flex子元素默认允许收缩，会导致图片被长文本挤压
改用float: left实现图片左浮动，文本会自动环绕浮动元素，浮动元素固定宽高后不会被后续内容挤压
给父元素添加清除浮动属性，避免高度塌陷

调整后完整CSS代码

.mysection{
  /* 移除原有flex配置，添加清除浮动属性 */
  overflow: auto;
}

/* 移除原有paragraph的flex配置，无实际作用 */
.paragraph {
  margin: 0;
}

.content {
  padding: 20px;
}

.mysection img{
  border-radius: 50%;
  width: 200px;
  height: 200px;
  /* 新增浮动和边距配置 */
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}