如何实现文本自动填充图片下方空间的L型布局？

我需要实现文本在图片旁的L型布局——文本先在图片右侧排列，当图片高度结束后自动填充图片下方的空间。

想要的效果：

当前实现效果：

我目前使用的代码：

CSS 代码 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 150px 1fr; 
  gap: 20px; 
  grid-auto-rows: minmax(150px, auto); 
  max-width: 1000px;
  margin: 0 auto;
}

.image {
  grid-row: span 1;
  grid-column: 1;
}

.image img {
  width: 100%;
  height: auto;
  border-radius: 50%; 
}

.content {
  grid-column: 2;
  grid-row: 1 / span 2; 
  margin-left: 20px; 
}

p {
  margin-bottom: 10px; 
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .image {
    grid-column: 1;
  }

  .content {
    grid-column: 1;
    margin-left: 0;
  }
}

HTML 代码 #

<div class="container">
  <div class="image">
    <img src="https://picsum.photos/495/495" alt="Image">
  </div>
  <div class="content">
         <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed elit ex. Fusce vitae egestas magna. Vestibulum et aliquet diam. Curabitur vulputate est vel arcu vehicula sollicitudin. Nam iaculis neque nec lorem dignissim lobortis. Aliquam ultricies, dui a volutpat lobortis, ipsum nisi malesuada mi, ut gravida nisl velit et purus. Vivamus volutpat cursus elementum. Sed et nisi eu mauris dictum accumsan et id nisi. Sed bibendum quam velit, nec dictum nibh pretium ut. Fusce volutpat erat hendrerit dictum vehicula. Nam lobortis iaculis ligula in cursus. Sed eleifend sem feugiat, tempor justo vel, pulvinar felis. Quisque ante libero, aliquet sed quam sit amet, hendrerit egestas enim. Fusce fermentum ex sed neque venenatis pharetra.</p>
<p>
In elit neque, elementum sit amet felis eu, dignissim ultricies urna. Duis pharetra lacus sem. Proin maximus ipsum ultricies, commodo dui fermentum, dictum tortor. Vestibulum in ipsum eget ex eleifend consequat. Vestibulum ultrices lorem nisl, quis sollicitudin ex vehicula eget. Nunc eleifend turpis quis facilisis suscipit. Nunc et iaculis diam, et pharetra nisi. Donec sem arcu, imperdiet ut consequat quis, vehicula ac urna. Curabitur nisl enim, volutpat sit amet turpis eget, tristique suscipit neque. Etiam sed sagittis sapien. Sed venenatis dui non dolor tincidunt, eget iaculis urna aliquet. Vestibulum nibh neque, mattis eu nulla quis, tempus dictum velit. Integer vulputate, orci eget rhoncus semper, diam metus volutpat sapien, ut ultrices mi leo eget ex.</p>
<p>
Nunc et ipsum sed lectus facilisis blandit sed id leo. Aenean et dignissim mi. Fusce auctor quam erat, vitae viverra mi tincidunt in. Nunc sodales tortor nec justo elementum, sit amet gravida dolor dictum. Ut at neque ornare, varius metus at, varius risus. Donec porttitor feugiat nulla, blandit lobortis ligula. In consectetur lectus id sagittis posuere. Quisque interdum tempus eros, id consectetur nisl pharetra nec. Cras eget vulputate justo. Phasellus id ante ante. Duis tincidunt tortor eget enim semper commodo. Praesent facilisis purus arcu, et hendrerit nunc condimentum nec.</p>

<p>
Maecenas sit amet vulputate neque, quis cursus lectus. Aliquam eget eros in felis pretium mollis. Curabitur imperdiet, lorem et rutrum rhoncus, turpis mauris pulvinar mauris, et mollis leo enim ut augue. Morbi malesuada, turpis sed dapibus luctus, erat lacus euismod nulla, sed tristique nunc ligula quis ipsum. Nulla pretium facilisis erat, a efficitur eros vestibulum sit amet. Fusce a lectus commodo, suscipit tortor a, tempor risus. Aenean purus arcu, mollis non eros at, efficitur hendrerit dui. Sed pulvinar pharetra neque quis laoreet. Vestibulum lorem tellus, tristique ac augue id, condimentum mattis leo. Phasellus luctus tincidunt euismod. Duis id odio eget mauris feugiat sodales quis et sem.</p>
<p>
Quisque ut tortor justo. Suspendisse mollis purus velit, sed varius leo tempus nec. Suspendisse placerat, ex eu aliquet fermentum, ex risus porta nunc, eget hendrerit dui ex vel odio. In aliquet viverra neque eget dapibus. Phasellus ut ligula arcu. Duis turpis nulla, laoreet id quam at, cursus scelerisque velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur congue eros felis, et gravida tortor tincidunt a. Ut mollis accumsan lacus, id consectetur elit sodales tristique. Ut commodo hendrerit convallis. Pellentesque tincidunt pharetra tincidunt. Nulla feugiat ullamcorper dapibus. Cras eget efficitur diam. Sed non justo sed urna consectetur pharetra. Maecenas cursus pellentesque tortor ut euismod.
    </p>
  </div>
</div>

由于内容是动态的，我不想通过创建两行两列的方式实现，而是希望布局能自动调整，在图片高度结束后让文本自动填充其下方空间。

解决方案 #

你可以使用浮动布局来实现这个需求，它能完美适配动态内容，自动让文本环绕图片形成L型布局，无需固定行数：

修改后的 CSS 代码

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden; /* 清除浮动，避免容器高度塌陷 */
}

.image {
  float: left;
  width: 150px;
  margin-right: 20px;
  margin-bottom: 20px;
}

.image img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

p {
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .image {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
    text-align: center; /* 移动端图片居中显示 */
  }
}

说明

• 浮动图片后，文本会自动在图片右侧排列，当文本高度超过图片时，会自动填充图片下方的空间，形成你需要的L型布局。
• overflow: hidden 用于清除浮动，确保容器能正确包裹内部元素，避免高度塌陷问题。
• 移动端样式保持原有响应式逻辑，图片居中显示，文本占满宽度。

如果偏好使用 Grid 布局，也可以通过 grid-auto-flow: dense 实现自动填充，但浮动布局的代码更简洁，适配性更强。

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