我正在尝试制作一个悬停时尺寸会增加的网格。 它完全按照我的意愿行事,但它很神经质。我不希望它像这样跳。 我做错了什么吗?
我认为它是 margin-top 和 bottoms 弄乱了它。有没有人建议如何解决这个问题?
这是 JSBin
最佳答案
我不会使用边距,而是使用一些较新的 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>
关于html - 尝试仅通过 css 实现缓动转换 - jumpy,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25193701/