Google Chrome 中的 CSS 动画和列

Question

我在使用 Google Chrome 中的动画图标时遇到了一些问题。我在 Safari 和 Firefox 中对此进行了测试，我的代码在那里工作，所以我不确定这是我的错误还是浏览器的问题。我在列中对图标进行编码，以便它们在响应式布局中均匀堆叠，但是当我将它们放在列中时，除了第一个图标之外的所有图标都会向下移动页面。

任何帮助识别我做错了什么或帮助找到解决方法的人都将不胜感激。为了简单起见，我删除了代码中的媒体查询。

#pptoc {
  background-color: #3f72a5;
  text-align: center;
  color: #a1c0d0;
  margin: 0;
  width: 100%;
  padding: 35px 0px;
  -webkit-columns: 6;
  -moz-columns: 6;
  columns: 6;
}

#pptoc img {}

#pptoc a {
  text-decoration: none;
  color: #a1c0d0;
}

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: rotate(4deg);
  }
  50% {
    -webkit-transform: rotate(-4deg);
  }
  100% {
    -webkit-transform: rotate(4deg);
  }
}

.pptocitem:hover {
  -webkit-animation: wiggle 0.2s 1;
}

<div id="pptoc">
  <div class="pptocsect"><img src="http://placehold.it/100x100?text=im1" class="pptocitem"><br>part 1</a>
  </div>
  <div class="pptocsect"><img src="http://placehold.it/100x100?text=im2" class="pptocitem"><span class="test1"><br>part 2</a></div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im3" class="pptocitem"><br>part 3</a></div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im4" class="pptocitem"><br>part 4</a></div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im5" class="pptocitem"><br>part 5</a></div>
<div class="part 6"><img src="http://placehold.it/100x100?text=im6" class="pptocitem"><br>part 6</a></div>

Answer 1

您可以使用 flex 代替 CSS columns，这些元素将保持不变。 Flexbox 还为您提供更多定位选项。

顺便说一句，你有一堆未闭合的 a 标签和一个未闭合的 span

#pptoc {
  background-color: #3f72a5;
  text-align: center;
  color: #a1c0d0;
  margin: 0;
  padding: 35px 0px;
  display: flex;
  justify-content: space-around;
}

#pptoc a {
  text-decoration: none;
  color: #a1c0d0;
}

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: rotate(4deg);
  }
  50% {
    -webkit-transform: rotate(-4deg);
  }
  100% {
    -webkit-transform: rotate(4deg);
  }
}

.pptocitem:hover {
  -webkit-animation: wiggle 0.2s 1;
}

<div id="pptoc">
  <div class="pptocsect"><img src="http://placehold.it/100x100?text=im1" class="pptocitem"><br>part 1
  </div>
  <div class="pptocsect"><img src="http://placehold.it/100x100?text=im2" class="pptocitem"><span class="test1"><br>part 2</span></div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im3" class="pptocitem"><br>part 3</div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im4" class="pptocitem"><br>part 4</div>
<div class="pptocsect"><img src="http://placehold.it/100x100?text=im5" class="pptocitem"><br>part 5</div>
<div class="part 6"><img src="http://placehold.it/100x100?text=im6" class="pptocitem"><br>part 6</div>