图片悬浮布局故障求助：6张图片无法实现两列并排显示

嘿，你的布局问题我帮你揪出来了——主要是HTML结构嵌套混乱和CSS浮动清除失效在搞鬼，下面一步步帮你搞定：

一、先说说问题出在哪 #

1. HTML嵌套乱套了：你把.hover14 column反复嵌套在子div里，导致后面每一张图片都被塞进了新的列容器，直接破坏了两列并排的逻辑；还有未闭合的标签和多余的<br>，进一步打乱了文档流。
2. CSS浮动清除没做好：.column::after伪元素设成了display: inline，根本没法正确清除浮动，容器高度塌陷后，后面的元素自然就乱排了。

二、先把HTML结构捋顺 #

所有图片统一放在一个.column容器里，每个图片用单独的<div>包裹，别再嵌套.column了，顺便清理掉多余的标签：

<h1>欢迎来到卡西亚的世界！</h1>
<p>这里展示了我所能做的、擅长的、专注的以及想要传播到世界的内容。同时我也希望获取更多全新的经验。欢迎浏览，或许我们可以展开合作。</p>
<br />
<div class="hover14 column">
  <div>
    <a href="#">
      <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/o-mne.png" /></figure>
    </a>
  </div>
  <div>
    <a href="#">
      <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/parkour.png" /></figure>
    </a>
  </div>
  <div>
    <a href="#">
      <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/videoedit.png" /></figure>
    </a>
  </div>
  <div>
    <a href="#">
      <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/webkamekr.png" /></figure>
    </a>
  </div>
  <div>
    <a href="#">
      <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/grafika.png"/></figure>
    </a>
  </div>
  <div>
    <a href="#">
      <figure><img src="http://kasihosvet.g6.cz/wp-content/uploads/2020/03/kontakt.png" /></figure>
    </a>
  </div>
</div>

三、调整CSS，把浮动逻辑搞对 #

修复浮动清除，同时简化冗余样式，让布局更稳定：

body { 
  color: #333; 
  font-family: 'Open Sans', sans-serif; 
  font-weight: 300; 
}
/* 用overflow:hidden替代伪元素，简单可靠清除浮动 */
.column { 
  margin: 5px; 
  padding: 0;
  overflow: hidden; 
}
.column div { 
  position: relative; 
  float: left; 
  width: 375px; 
  height: 225px; 
  margin: 0 25px 25px 0; /* 给右侧和底部留间距 */
  padding: 0; 
}
/* 每行第二个元素去掉右侧margin，保证刚好两列 */
.column div:nth-child(2n) {
  margin-right: 0;
}
.column div span { 
  position: absolute; 
  bottom: -20px; 
  left: 0; 
  z-index: 0; 
  width: 100%; 
  margin: 0; 
  padding: 0; 
  color: #444; 
  font-size: 18px; 
  text-decoration: none; 
  text-align: center; 
  transition: .3s ease-in-out; 
  opacity: 0; 
}
figure { 
  width: 100%; /* 用百分比适配父容器，避免宽度溢出 */
  height: 100%; 
  margin: 0; 
  padding: 0; 
  background: #fff; 
  overflow: hidden; 
}
figure:hover + span { 
  bottom: -36px; 
  opacity: 1; 
}
/* Shine效果保留，这个没问题 */
.hover14 figure { 
  position: relative; 
}
.hover14 figure::before { 
  position: absolute; 
  top: 0; 
  left: -75%; 
  z-index: 2; 
  content: ''; 
  width: 50%; 
  height: 100%; 
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); 
  transform: skewX(-25deg); 
}
.hover14 figure:hover::before { 
  animation: shine .75s; 
}
@keyframes shine { 
  100% { left: 125%; } 
}

四、为啥这么改？给你划重点 #

• 结构统一：所有图片放在同一个列容器下，都是同级div，浮动布局才能正常按顺序排列。
• 浮动清除更靠谱：overflow: hidden是清除浮动的经典方案，比伪元素写法更少出错，适合这种简单布局。
• 自动两列排列：nth-child(2n)选中每行第二个元素，去掉右侧margin，保证每行刚好两个图，超出后自动换行。
• 避免溢出：把figure的宽高改成百分比，完全适配父div的尺寸，不会出现宽度不够导致的换行。

这样调整完，6张图片就能规规矩矩两列并排，hover的shine效果也能正常触发啦！

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