如何让id为wrapper的div内部子div横向并排且不影响其他div

问题背景 #

需要将id为wrapper的div内部所有子div横向并排，但无法给这些子div添加id或class，全局div{float:left;}会影响页面其他div，需针对性布局方案。

方案1：后代选择器 + 浮动 #

通过#wrapper div精准选中目标子元素，避免全局影响，同时给父容器设置清除浮动规则防止高度塌陷：

#wrapper {
  /* 清除浮动，避免父元素高度塌陷 */
  overflow: hidden;
}
#wrapper div {
  float: left;
  /* 可选：添加子元素间距 */
  margin-right: 10px;
}

方案2：Flexbox布局（推荐） #

利用Flexbox的特性，仅给父容器设置样式即可实现子元素横向排列，无需操作子元素，布局更灵活：

#wrapper {
  display: flex;
  /* 可选：添加子元素间距 */
  gap: 10px;
  /* 可选：子元素超出容器时自动换行 */
  flex-wrap: wrap;
}

方案3：Grid布局 #

适合需要更精细化控制的场景，可快速实现横向排列，支持自适应列数：

#wrapper {
  display: grid;
  /* 自动适配列数，每列最小宽度匹配图片尺寸 */
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  /* 可选：添加子元素间距 */
  gap: 10px;
}

原始HTML代码 #

<div id="wrapper">
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
  </div>
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
  </div>
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
  </div>
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
  </div>
  <div>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" width='50px'>
  </div>
</div>

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