61,112
社区成员
发帖
与我相关
我的任务
分享定位宽度
html,body{
padding: 0;
margin: 0;
.content_wrap{
width: 100%;
background-color: white;
.content{
width: 1080px;
margin: 0 auto;
.list_nav{
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: start;
font-size: 12px;
}
.list_data{
height: 548px;
width: 1080px;
.pro_img{
width: 426px;
height: 548px;
border: 1px solid;
float: left;
position: relative;
.scrollpic{
overflow: hidden;
position: absolute;
left: 434px;
top: 0px;
width: 400px;
height: 400px;
// display: none;
img{
position: absolute;
left: 0px;
top: 0px;
height: 848px;
width: 848px;
}
}
.bigpic{
position: relative;
width:424px;
height:424px;
background-color: aqua;
margin-bottom: 10px;;
img{
width: 100%;
height: 100%;
}
.hoverpic{
position: absolute;
top: 0;
left: 0;
width: 108px;
height: 108px;
z-index: 1;
display: none;
cursor:move;
background-color: rgba($color: #000, $alpha: 0.5);
}
}
.smallpic{
clear: both;
display: flex;
justify-content: space-around;
width: 426px;
height: 78px;
img{
// border: 1px solid;
width: 76px;
height: 76px;
margin: 0 5px;
padding: 5px;
box-sizing: border-box;
&.active{
border: 1px solid #fa4187;
}
}
}
}
.pro_info{
float: right;
width: 630px;
height: 548px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
// .goods_name{
// font-size: 22px;
// line-height: 22px;
// }
// .goods_price{
// height: 54px;
// padding: 15px;
// }
span{
display: inline-block;
width: 60px;
text-align: center;
}
#reduce,#increase{
width: 35px;
height: 35px;
border: 1px solid #ddd;
background-color: #fff;
}
#buy{
width: 180px;
height: 46px;
background-color: #fa4187;
color: white;
border: none;
}
#cart{
@extend #buy;
background-color: white;
color: #fa4187;
border: #fa4187 1px solid;
}
.Collection,.service{
width: 80px;
height: 46px;
border: 1px solid #ccc;
background-color: #fff;
}
}
}
.a_wrap{
height: 66px;
width: 644px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
div{
width: 120px;
font-size: 16px;
&:hover{
// &.active{
color: #fa4187;
position: relative;
&:after{
content: " ";
position: absolute;
bottom: -22px;
left: 0px;
width: 64px;
height: 0px;
border: 1px solid #fa4187;
}
// }
}
}
}
}
}
}.scrollpic{
overflow: hidden;
position: absolute;
left: 434px;
top: 0px;
width: 400px;
height: 400px;
// display: none;
img{
position: absolute;
left: 0px;
top: 0px;
height: 848px;
width: 848px;
}
}这个img在浏览器的宽度为什么是400px，高度却是848px？
...全文
请发表友善的回复…
发表回复
fjxylin 2020-04-01
- 打赏
- 举报
我是做放大镜效果，删除定位图片动不了了
初心不变时过迁 2020-04-01
- 打赏
- 举报
img 跑到 .scrollpic 下了 所以会这样
这里说错了
应该时 img 变得 和.scrollpic同级了 然后你这俩元素的宽应该是400 最靠近父容器为reletive的 宽400 高度父容器应该没设或者更大 所以未848
这里说错了
应该时 img 变得 和.scrollpic同级了 然后你这俩元素的宽应该是400 最靠近父容器为reletive的 宽400 高度父容器应该没设或者更大 所以未848
初心不变时过迁 2020-04-01
- 打赏
- 举报
position: absolute;
相对于父容器 要为 reletive 看你这里这么写 感觉上一层也是 absolute 所以 你这里的层次乱掉了 img 跑到 .scrollpic 下了 所以会这样
.scrollpic{
overflow: hidden;
position: absolute;
left: 434px;
top: 0px;
width: 400px;
height: 400px;
// display: none;
img{
position: absolute;
left: 0px;
top: 0px;
height: 848px;
width: 848px;
}
}
相对于父容器 要为 reletive 看你这里这么写 感觉上一层也是 absolute 所以 你这里的层次乱掉了 img 跑到 .scrollpic 下了 所以会这样
.scrollpic{
overflow: hidden;
position: absolute;
left: 434px;
top: 0px;
width: 400px;
height: 400px;
// display: none;
img{
position: absolute;
left: 0px;
top: 0px;
height: 848px;
width: 848px;
}
}
初心不变时过迁 2020-04-01
- 打赏
- 举报
你这里貌似设置了
img{
position: absolute;
left: 0px;
top: 0px;
height: 848px;
width: 848px;
}
你把这里的 position: absolute; 去掉试试
img{
position: absolute;
left: 0px;
top: 0px;
height: 848px;
width: 848px;
}
你把这里的 position: absolute; 去掉试试
初心不变时过迁 2020-04-01
- 打赏
- 举报
再贴完整点 目前看不出来
fjxylin 2020-03-31
- 打赏
- 举报
不是注释的问题，sass的注释就是//，保存后会自动转成css的注释
天际的海浪 2020-03-31
- 打赏
- 举报
注释改成 /* */ 试试
fjxylin 2020-03-31
- 打赏
- 举报
sass语法
天际的海浪 2020-03-31
- 打赏
- 举报
你这个是原生的css吗？
原生的css是不能大括号嵌套的。
另外 css中的注释只能用 /* */ 不能用//
