如何实现图片围绕浮动div自动调整宽度至红色区块？

嘿，我来帮你搞定这个布局需求！先看看你想要实现的目标效果：

你的需求很明确：让左侧图片自动调整尺寸，在碰到右侧红色区块前占满所有可用宽度。不过你当前的代码里，图片设置width:100%会直接占满容器的整个宽度，和右侧的浮动红色区块重叠——这是因为浮动元素脱离了文档流，图片不会自动避开它。

下面给你几个靠谱的解决方案，按需选择：

方法1：CSS Grid布局（最推荐，代码简洁直观） #

Grid天生适合这种自适应两栏布局，完全不需要浮动，直接定义列的规则就行：

#container {
  background: yellow;
  display: grid;
  /* 第一列占剩余所有空间，第二列最小200px、最大占容器50% */
  grid-template-columns: 1fr minmax(200px, 50%);
}
#floated {
  background: red;
}
#image {
  width: 100%;
  height: auto;
}

这样设置后，图片会自动填满左侧的可用空间，右侧红色区块也能保持你要求的宽限范围，完美匹配你的需求。

方法2：保留浮动，用BFC让图片避开浮动元素 #

如果你想继续用浮动的写法，可以给图片套个容器，触发BFC（块级格式化上下文）来让它自动避开右侧的浮动元素：

首先调整HTML结构，给图片加个容器：

<div id="container">
  <div id="floated">红色区块内容</div>
  <div class="image-wrapper">
    <img id="image" src="你的图片地址" alt="描述">
  </div>
</div>

然后修改CSS：

#container {
  background: yellow;
  overflow: hidden; /* 清除浮动对容器高度的影响 */
}
#floated {
  float: right;
  min-width: 200px;
  max-width: 50%;
  background: red;
}
.image-wrapper {
  overflow: auto; /* 触发BFC，自动避开右侧浮动元素 */
}
#image {
  width: 100%;
  height: auto;
}

触发BFC的容器会自动识别旁边的浮动元素，所以图片容器的宽度会自动适配剩余空间，图片就能占满这个可用宽度啦。

方法3：CSS Flexbox布局 #

Flex布局也能轻松实现这个效果，代码如下：

#container {
  background: yellow;
  display: flex;
}
#floated {
  min-width: 200px;
  max-width: 50%;
  background: red;
  flex-shrink: 0; /* 防止红色区块被压缩 */
}
#image {
  flex-grow: 1; /* 让图片占满剩余所有空间 */
  height: auto;
  object-fit: cover; /* 可选，保持图片比例不拉伸 */
}

Flex容器里，红色区块设置flex-shrink:0保证它不会被压缩，图片设置flex-grow:1就会自动填满剩下的空间，同时height:auto保持图片的原始比例。

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