当大小改变时，保持HTML浮动元素不变
当大小改变时，保持HTML浮动元素不变
提问于 2018-07-30 01:41:02
我不知道如何将元素保留在适当的位置。当我将鼠标悬停在浮动元素上时，边框会被调整，但会将其他元素推来推去(图像为300x300px)。我如何才能使它们保持在适当的位置？提前谢谢。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>These are images</h1>
<div id="container">
<div class="imgDiv">
<img class="img"/>
<h3>Click on image!</h3>
</div>
<div class="imgDiv">
<img class="img"/>
<h3>Click on image!</h3>
</div>
<div class="imgDiv">
<img class="img"/>
<h3>Click on image!</h3>
</div>
<div class="imgDiv">
<img class="img"/>
<h3>Click on image!</h3>
</div>
<div class="imgDiv">
<img class="img"/>
<h3>Click on image!</h3>
</div>
<div class="imgDiv">
<img class="img"/>
<h3>Click on image!</h3>
</div>
</div>
</body>
</html>style.css文件为：
.imgDiv {
float:left;
border: 1px solid black;
text-align:center;
border-radius:10px;
margin: 0px 10px 10px 0px;
}
.img {
border-radius:10px;
}
.imgDiv:hover {
border: 5px solid black;
}回答 2
Stack Overflow用户
发布于 2018-07-30 01:48:41
在悬停时减小边距以保持DIVs位置。
.imgDiv {
float:left;
border: 1px solid black;
text-align:center;
border-radius:10px;
margin: 5px;
}
.img {
border-radius:10px;
}
.imgDiv:hover {
border: 5px solid black;
margin: 1px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>These are images</h1>
<div id="container">
<div class="imgDiv">
<img class="img"/>
<h3>Click on image!</h3>
</div>
<div class="imgDiv">
<img class="img"/>
<h3>Click on image!</h3>
</div>
<div class="imgDiv">
<img class="img"/>
<h3>Click on image!</h3>
</div>
<div class="imgDiv">
<img class="img"/>
<h3>Click on image!</h3>
</div>
<div class="imgDiv">
<img class="img"/>
<h3>Click on image!</h3>
</div>
<div class="imgDiv">
<img class="img"/>
<h3>Click on image!</h3>
</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2018-07-30 01:59:58
将此行添加到.imgDive:hover
margin: -4px 6px 10px -4px !important;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51582930
复制相关文章
相似问题
腾讯云开发者
