如何在Div容器底部并排显示两张各占50%宽度的图片？

嘿，作为HTML新手能启动第一个大型项目已经超棒啦！你的问题很典型，咱们一步步来搞定它：

核心思路 #

要让两张图片在Div容器底部并排、各占50%宽度且尺寸一致，Flexbox布局是最适合新手的方案——它语法简单，上手快，兼容性也拉满。

具体修改步骤 #

1. 给你的Div容器添加类名 #

先给包裹图片的Div加个好记的类名（比如bottom-image-container），方便咱们写CSS样式：

<div class="bottom-image-container">
  <img src="你的第一张图片地址" alt="图片描述1">
  <img src="你的第二张图片地址" alt="图片描述2">
</div>

2. 编写CSS实现目标布局 #

把这段CSS代码加到你的样式区域（可以是<style>标签里，也可以是外部CSS文件）：

/* 先确保容器定位到页面/父元素底部 */
.bottom-image-container {
  /* 如果需要容器固定在页面底部，添加以下两行（根据你的页面结构调整） */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  
  /* 关键：启用Flexbox让子元素并排 */
  display: flex;
  /* 移除图片之间的默认间距 */
  gap: 0;
}

/* 设置每张图片的样式，保证尺寸一致 */
.bottom-image-container img {
  /* 每张图片占容器宽度的50% */
  width: 50%;
  /* 让图片按比例缩放，避免变形 */
  height: auto;
  /* 可选：防止边框/内边距导致宽度溢出容器 */
  box-sizing: border-box;
}

3. 为什么之前图片会上下堆叠？ #

<img>标签默认是行内块元素，如果容器宽度不足，或者图片自身宽度超过容器可用空间，就会自动换行。用Flexbox后，容器会强制子元素在同一行排列，再配合50%的宽度设置，就能完美实现并排效果啦。

备选方案（如果你暂时不想用Flexbox） #

要是对Flexbox还陌生，也可以用inline-block方案：

.bottom-image-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* 消除容器内空格对布局的影响 */
  font-size: 0;
}

.bottom-image-container img {
  width: 50%;
  height: auto;
  /* 恢复图片的行内块属性 */
  display: inline-block;
  box-sizing: border-box;
}

不过这个方法需要处理容器内的空格问题，Flexbox明显更省心哦~

记得替换代码里的图片地址和描述，要是还有小问题，随时调整细节就好！

内容的提问来源于stack exchange，提问作者Drone Flying Toronto