如何阻止分栏容器内的图片超出div容器范围？

问题根源 #

1. CSS语法错误：main选择器内的#introduction未闭合大括号，导致后续body的样式被错误嵌套，#i2的overflow:hidden未正确生效。
2. 分栏布局（column-count）中使用float:right会让图片脱离容器约束，且img的right:20px无效（float元素不支持该属性），直接导致图片超出范围。
3. #i2设置了min-width:700px，当屏幕宽度小于700px + 20vw（body的左右margin）时，容器会直接超出body边界。

修复方案 #

修改后的关键CSS代码：

main{
  margin: 1em;
  padding: 10px 40px;
  #introduction{
    text-indent: 2em;
      #cat1{
        display: flex;
        justify-content: center;
        padding-top: 20px;
        overflow: clip; 
        position: sticky;
        img{
          border-radius: 25px;                        
          border-style: solid;
          border-color:#31334a;
          border-width: 5px;
        }
      }
  } /* 补上缺失的#introduction闭合大括号 */
} /* 补上main的闭合大括号 */
body{
    background-color: #fdf5e2;
    margin: 0 10vw;
    padding: 0;
    #i2{
        padding-top: 50px;
        padding-bottom: 150px;
        column-count: 2;
        column-width: 10rem;
        align-content: space-evenly;
        max-width: 100%; /* 替换min-width，让容器自适应body宽度 */
        position: relative;
        white-space: normal;
        overflow: hidden;
        column-gap: 2rem; /* 增加栏间距，避免内容拥挤 */
        img{
          height: auto; /* 保持图片比例，避免拉伸变形 */
          max-width: 100%; /* 强制图片不超出分栏宽度 */
          margin-left: auto; /* 实现右对齐，替代float:right */
          margin-bottom: 1rem; /* 增加底部间距，避免和文字重叠 */
        }
    }
    #i3{
      text-align: center;
      text-indent: 0;
      column-span: all; /* 让段落跨两栏显示，排版更合理 */
    }
}

关键修改说明 #

• 修复语法错误：补上缺失的闭合大括号，确保所有样式规则被正确解析。
• 替换float布局：用margin-left:auto实现图片右对齐，避免float脱离分栏容器约束。
• 限制图片尺寸：max-width:100%保证图片不会超出分栏宽度，height:auto维持图片原始比例。
• 移除强制最小宽度：改用max-width:100%让容器自适应body宽度，解决小屏幕下的溢出问题。
• 优化分栏体验：添加栏间距、让居中段落跨栏显示，提升整体排版美观度。

修改后图片会被限制在分栏容器内，不会超出body范围，同时解决了文字与图片重叠的问题。

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