html - 尝试仅通过 css 实现缓动转换 - jumpy

Question

我正在尝试制作一个悬停时尺寸会增加的网格。它完全按照我的意愿行事，但它很神经质。我不希望它像这样跳。我做错了什么吗？

我认为它是 margin-top 和 bottoms 弄乱了它。有没有人建议如何解决这个问题？

这是 JSBin

Answer 1

我不会使用边距，而是使用一些较新的 css 技术并将其精简。它不会跳来跳去。但是，页面上的其他内容会发生变化。

http://jsbin.com/jarizowo/2/edit

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both
}

.grid,
.grid * {
    box-sizing: border-box
}

.grid > .col img {
    width: 100%;
    display: block;
}

.col {
    width: 25%;
    float: left;
    transition: all 0.3s ease;
    padding: 3px;
}

.col:hover {
    width: 48%
}

HTML

<div class="grid cf">
 <div class="col">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRxMWdIL1mxF_PJHJi-PUUnbSnfOtO1eQPa3AxRAyiCEZBnXXSX">
 </div>
 <!--col-->
 <div class="col">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4fExlS5dZ69n_H0Ci_a6RATh_rRjEw1Ac2yTdg-R8EcxNW7iE">
 </div>
</div>
<div class="grid cf">
 <div class="col">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRxMWdIL1mxF_PJHJi-PUUnbSnfOtO1eQPa3AxRAyiCEZBnXXSX">
 </div>
 <!--col-->
 <div class="col">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4fExlS5dZ69n_H0Ci_a6RATh_rRjEw1Ac2yTdg-R8EcxNW7iE">
 </div>
</div>