css - 当我增加框元素的大小时,它下面的框会像 300px 一样下降
问题描述
/* Add a black background color to the top navigation */
body {
margin: 0px;
background-color: rgb(89, 90, 74);
}
.menu {
background-color: rgb(54,54,53);
overflow: hidden;
width: 100%;
padding-bottom: 10px;
padding-top: 10px;
position: fixed;
z-index: 4;
}
.menu a {
font-size: 30px;
font-family: Arial, sans-serif;
color: rgb(176, 254, 118);
text-decoration: none;
margin-left: 15px;
}
.container {
width: 90%;
margin-left: 8%;
margin-right: 8%;
overflow: hidden;
margin-top: 70px;
padding: 30px 0px;
position: absolute;
}
.container div {
display: block;
position: relative;
margin-left: 15px;
margin-bottom: 15px;
width: 250px;
height: 450px;
overflow: hidden;
background-color: rgb(255,255,255);
color: rgb(255,255,255);
float: left;
background-color: rgb(176, 254, 118);
border-radius: 15px;
}
.ahover:hover{
color: rgb(255,255,255);
transition: 0.6s;
}
.ahover:not(:hover){
color: rgb(176, 254, 118);
transition: 0.6s;
}
#sellbox {
color: rgb(54,54,53)
}
#sellbox ul {
list-style: none
}
#sellbox #element {
font-size: 25px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-bottom: 3px;
}
#sellbox #title {
text-align: center;
font-size: 30px;
margin-top: 4px;
font-family: Arial, Helvetica, sans-serif;
}
#sellbox:hover{
padding: 3px;
box-shadow: rgb(54,54,53) 3px;
}
#sellbox:not(:hover){
padding: 0px;
box-shadow: none;
}
我的问题是,当您将鼠标悬停在显示“购买我”的框时,它会增加大小,但是每隔一个框都会移动,我试图检查这种类型的现有问题,但我还没有找到答案,你能创建一个新的吗?摆弄正在工作的那个,告诉我问题出在哪里,谢谢。那是css,也是一个小提琴https://jsfiddle.net/t4r3L2v8/
解决方案
一个元素漂浮在它首先获得空间的地方,并且想要获得最多的顶部和左侧空间。当您增加填充时,它会占用额外的空间,从而中断下一个流程。
用这个替换你的整个css -
/* Add a black background color to the top navigation */
body {
margin: 0px;
background-color: rgb(89, 90, 74);
}
.menu {
background-color: rgb(54,54,53);
overflow: hidden;
width: 100%;
padding-bottom: 10px;
padding-top: 10px;
position: fixed;
z-index: 4;
}
.menu a {
font-size: 30px;
font-family: Arial, sans-serif;
color: rgb(176, 254, 118);
text-decoration: none;
margin-left: 15px;
}
.container {
width: 90%;
margin-left: 8%;
margin-right: 8%;
overflow: hidden;
margin-top: 70px;
padding: 30px 0px;
position: absolute;
}
.container div {
display: block;
position: relative;
margin-left: 15px;
margin-bottom: 15px;
width: 250px;
height: 450px;
overflow: hidden;
background-color: rgb(255,255,255);
color: rgb(255,255,255);
float: left;
background-color: rgb(176, 254, 118);
border-radius: 15px;
}
.ahover:hover{
color: rgb(255,255,255);
transition: 0.6s;
}
.ahover:not(:hover){
color: rgb(176, 254, 118);
transition: 0.6s;
}
#sellbox {
color: rgb(54,54,53);
transition: .5s;
}
#sellbox ul {
list-style: none
}
#sellbox #element {
font-size: 25px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-bottom: 3px;
}
#sellbox #title {
text-align: center;
font-size: 30px;
margin-top: 4px;
font-family: Arial, Helvetica, sans-serif;
}
#sellbox:hover{
transform: scale(1.03);
box-shadow: 0 0 5px rgb(54,54,53);
}
#sellbox:not(:hover){
padding: 0px;
box-shadow: none;
}
推荐阅读
- python - Postgresql - 用户的密码认证失败
- ios - Flutter 应用程序的 FCM 通知未显示在 iOS 系统托盘中
- wso2 - 如何从令牌的 wso2 授权更改肥皂 1.2 响应
- python - 如何有效地编写给定的循环?
- wordpress - 为什么 WP_Screeen 不显示 admin_body_class 的所有选项
- javascript - 零后如何停止倒计时
- sql - 只为一条记录加入包含多个条目的表
- javascript - 为什么更新数组中的项目会更新所有元素的属性?Vue
- sql - 在 SQL 中如何按日期获取分组的百分比?
- java - 如何将 Java 枚举转换为 Swift 枚举?