如何用CSS将含4张图片的div拆分为2列2行布局？

针对你提供的HTML结构，以下是几种实用的CSS实现方式：

方法1：CSS Grid（推荐） #

Grid是最适合二维布局的方案，代码简洁直观：

#your-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 生成2个等宽列 */
  gap: 10px; /* 图片间的间距，可自定义 */
}

#your-cards img {
  width: 100%; /* 图片自适应列宽 */
  height: auto; /* 保持图片原始比例 */
}

方法2：CSS Flexbox #

Flexbox也能轻松实现，适合需要灵活调整布局的场景：

#your-cards {
  display: flex;
  flex-wrap: wrap; /* 允许元素换行 */
  gap: 10px;
}

#your-cards img {
  flex: 0 0 calc(50% - 5px); /* 每列占50%宽度，减去gap的一半避免溢出 */
  height: auto;
}

方法3：传统Float（兼容旧浏览器） #

如果需要兼容IE等老版本浏览器，可使用float方案：

#your-cards {
  overflow: hidden; /* 清除浮动导致的容器高度塌陷 */
}

#your-cards img {
  float: left;
  width: calc(50% - 10px); /* 每列50%宽度，减去margin间距 */
  margin: 5px; /* 图片间距 */
  height: auto;
}

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