图片无法水平排列求助：基于W3Schools图库代码的调试问题

问题描述 #

参考图片图库教程编写个人首页照片展示代码，图片无法水平排列，呈现上下堆叠状态。已尝试flex、float等方案仍未解决，相关代码如下：

原CSS代码 #

.column {
  float: left;
  width: 500px;
  padding: 10px;
}

.column img {
  opacity: 0.8;
  width: 150px;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.container {
  position: relative;
  display: none;
}

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

原HTML代码 #

<div class="row">
  <div class="column">
    <img src="https://picsum.photos/150/150" alt="F35C Parked" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/150/150" alt="F16 Venom" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/150/150" alt="EuroFighter Landing" onclick="myFunction(this);">
  </div>
</div>
<div class="container">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>

问题原因与修复 #

核心问题是.column设置的width: 500px过大，三个列的总宽度远超容器宽度，导致无法在一行容纳，只能换行堆叠。以下提供两种修复方案：

方案1：调整Float布局的列宽度 #

把.column的宽度改小，确保三个列能在一行放下，同时添加box-sizing: border-box让padding包含在宽度内，避免布局误差：

.column {
  float: left;
  width: calc(33.33% - 20px); /* 减去左右padding各10px的总和 */
  padding: 10px;
  box-sizing: border-box;
}

原有的.row:after清除浮动代码保留，确保父容器高度正常。

方案2：改用Flex布局（更推荐） #

Flex布局无需处理浮动清除，逻辑更简洁，直接给.row设置Flex属性：

.row {
  display: flex;
  gap: 10px; /* 控制列之间的间距，替代padding的部分作用 */
}

.column {
  flex: 1; /* 让每个列平分父容器宽度 */
  padding: 5px;
}

/* 可以删除原有的.row:after清除浮动代码 */

完整修复代码（Flex版本） #

.row {
  display: flex;
  gap: 10px;
}

.column {
  flex: 1;
  padding: 5px;
}

.column img {
  opacity: 0.8;
  width: 150px;
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

.container {
  position: relative;
  display: none;
}

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

<div class="row">
  <div class="column">
    <img src="https://picsum.photos/150/150" alt="F35C Parked" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/150/150" alt="F16 Venom" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/150/150" alt="EuroFighter Landing" onclick="myFunction(this);">
  </div>
</div>
<div class="container">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>

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