如何实现区块正确并排？蓝色区块仅显示图片且红色区块紧邻其旁

嘿，我来帮你搞定这个布局问题！你现在的核心需求是让蓝色区块只包裹图片（没有多余的蓝色背景），同时红色区块紧紧贴在蓝色区块旁边对吧？我给你两种靠谱的解决方案，看你习惯哪种：

方案一：优化现有Float布局 #

你原来的代码问题在于蓝色区块没限制宽度，红色区块固定了50%宽度导致没法自适应剩余空间。修改如下：

#div1 { 
  float: left; 
  background: blue; 
  margin-top: 100px;
  width: fit-content; /* 让div宽度完全贴合图片内容，去掉多余蓝色背景 */
} 
#div2 { 
  float: left; 
  height: 100px; 
  background: red; 
  margin-top: 100px;
  overflow: hidden; /* 触发BFC，自动占据蓝色区块之外的剩余宽度 */
} 
.div-container { 
  clear: both; 
  overflow: hidden; 
} 
#div3 { 
  float: left; 
  width: 50%; 
  background: yellow;
}
/* 绿色区块保持现有正常代码即可 */

关键说明： #

• width: fit-content 会让蓝色的#div1宽度刚好包裹住内部图片，彻底解决右侧多余蓝色块的问题；
• 给#div2去掉固定的width:50%，换成overflow: hidden，它会自动填满蓝色区块旁边的剩余空间，自然就紧贴在一起了。

方案二：用更现代的Flex布局（推荐） #

Float布局容易有各种小坑，用Flex布局会更直观简洁，直接给包裹蓝色和红色区块的父容器设置Flex属性就行：

/* 先给包裹#div1和#div2的父容器加这个样式，比如叫.top-container */
.top-container {
  display: flex;
  margin-top: 100px; /* 把原来的margin-top移到父容器，统一控制间距 */
}

#div1 { 
  background: blue; 
  /* 去掉原来的float和margin-top，父容器已经处理了间距 */
} 
#div2 { 
  flex: 1; /* 自动占据父容器剩余的所有空间 */
  height: 100px; 
  background: red; 
} 
.div-container { 
  clear: both; 
  overflow: hidden; 
} 
#div3 { 
  float: left; 
  width: 50%; 
  background: yellow;
}
/* 绿色区块保持现有代码即可 */

关键说明： #

• Flex布局下，父容器的display:flex会让子元素横向排列；
• #div1默认会贴合内部图片的宽度，不会有多余背景；
• #div2的flex:1会让它自动填满父容器剩下的空间，完美紧贴蓝色区块，而且不用操心换行或者宽度计算的问题。

如果你的图片本身带有默认的边距，记得给图片加个display:block或者调整margin/padding，确保蓝色背景完全贴合图片哦～

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