添加边界时CSS Divs跳转
添加边界时CSS Divs跳转
提问于 2016-08-19 16:03:38
当我悬停在第一个(左上角)时，我不明白为什么盒子会移动。我已经将框大小设置为边框，所以在悬停时添加的边框不应该影响任何事情，而且它只发生在frst框上。请帮帮我！
JS小提琴这里。
* {
box-sizing: border-box !important;
}
body{
font-family: Arial, Helvetica, sans-serif;
}
#gameArea {
width: 700px;
margin: 0 auto;
}
h1{
text-align: center;
}
.card {
float: left;
margin: 10px;
padding: 20px;
background: lightblue;
text-align: center;
border-radius: 5px;
box-shadow: 10px 10px 10px #ccc;
}
.hidden{
display: none;
}
.card:hover {
cursor: pointer;
border: 3px solid blue;
}
.card p {
font-size: 48px;
color: blue;
}
img {
width: 250px;
height: 188px;
vertical-align: middle;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
margin:0;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2016-08-19 16:09:59
这是因为边框宽度会增加元素的宽度，因此当在悬停时向元素添加额外的宽度时，它将改变正常的布局流。
通过在静态中添加一个3px透明边框，您可以轻松地修复它：
.card { border: 3px solid transparent; }jsFiddle叉：https://jsfiddle.net/azizn/pL2j0zu5/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39043432
复制相关文章
相似问题
腾讯云开发者
