CSS如何实现图片位于右上角、文字环绕的响应式布局

要实现「图片固定在容器右上角、剩余区域文字自动环绕填充、响应式适配」的效果，且仅使用图片、文本容器两个子元素、无需拆分文本内容，直接使用CSS原生浮动特性即可实现，比Grid方案更适配该场景。

实现代码 #

HTML结构 #

仅需保留父容器、图片、文本块三个层级，文本内容全部放在同一个容器内，无需拆分：

<div class="flash-container w-4/5 h-4/5">
  <div class="flash-picture border border-red-600">Picture</div>
  <div class="flash-text border border-red-600">
    <!-- 所有文本内容直接放在这里，无需拆分 -->
    全部文本内容
  </div>
</div>

CSS样式 #

核心逻辑是给右上角的图片设置右浮动，浏览器会自动让文字环绕在浮动元素的左侧与下方，同时加响应式断点适配小屏：

.flash-container {
  /* 清除浮动带来的容器高度塌陷问题 */
  overflow: hidden;
  padding: 12px;
}

.flash-picture {
  /* 核心属性：设置右浮动，触发文字环绕效果 */
  float: right;
  /* 图片占容器右上半区，可根据需求调整尺寸 */
  width: 50%;
  aspect-ratio: 1/1;
  /* 控制图片和文字的间距 */
  margin: 0 0 12px 12px;
  box-sizing: border-box;
}

.flash-text {
  line-height: 1.6;
}

/* 响应式适配：屏幕宽度小于768px时，图片占满整宽，切换为上下排版 */
@media (max-width: 768px) {
  .flash-picture {
    float: none;
    width: 100%;
    margin: 0 0 12px 0;
  }
}

方案优势 #

• 结构精简：父容器内仅包含图片、文本块2个子元素，不需要拆分文本为多个独立节点，减少DOM冗余
• 效果原生：浏览器自动处理文字排版逻辑，文本会先填满图片左侧的区域，再自动延伸到图片下方的整行区域，完全匹配目标布局效果
• 适配简单：仅需通过媒体查询调整浮动属性和图片宽度，即可快速实现多端响应式适配
• 扩展灵活：如果需要实现不规则形状的文字环绕，可给图片元素添加shape-outside属性自定义环绕边界，默认矩形浮动即可满足常规需求

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