HTML, body {
padding: 0; 
margin: 0; 
. Content_wrap {
width: 100%; 
Background - color: white. 
. The content {
Width: 1080 px; 
margin: 0 auto; 

. List_nav {
Height: 50 px; 
width: 100%; 
display: flex; 
align-items: center; 
The justify - content: start; 
font-size: 12px; 
} 
. List_data {
Height: 548 px; 
Width: 1080 px; 
. Pro_img {
Width: 426 px; 
Height: 548 px; 
Border: 1 px solid; 
float: left; 
Position: relative; 
. Scrollpic {
overflow: hidden; 
position: absolute; 
Left: 434 px; 
top: 0px; 
Width: 400 px; 
height: 400px; 

//display: none; 
Img {
position: absolute; 
Left: 0 px; 
top: 0px; 
Height: 848 px; 
Width: 848 px; 
} 
} 
. Bigpic {
Position: relative; 
Width: 424 px; 
Height: 424 px; 
Background - color: aqua; 
Margin - bottom: 10 px;; 
Img {
width: 100%; 
height: 100%; 
} 
. Hoverpic {
position: absolute; 
top: 0; 
left: 0; 
Width: 108 px; 
Height: 108 px; 
Z - index: 1; 
display: none; 
Cursor: move; 
Background - color: rgba ($color: # 000, $alpha: 0.5); 
} 
} 
. Smallpic {
clear: both; 
display: flex; 
The justify - content: space - around; 
Width: 426 px; 
Height: 78 px; 
Img {
//border: 1 px solid; 
Width: 76 px; 
Height: 76 px; 
Margin: 0 px; 
Padding: 5 px; 
box-sizing: border-box; 
& The active {
Border: # 1 px solid fa4187; 
} 
} 
} 
} 
. Pro_info {
float: right; 
Width: 630 px; 
Height: 548 px; 
display: flex; 
flex-direction: column; 
The justify - content: space - around; 
The align - items: flex - start; 
//. Goods_name {
//the font - size: 22 px; 
//the line - height: 22 px; 

//} 
//. Goods_price {
//height: 54 px; 
//padding: 15 px; 
//} 
Span {
display: inline-block; 
Width: 60 px; 
text-align: center; 
} 
# # the reduce, happens {
Width: 35 px; 
height: 35px; 
Border: # 1 px solid DDD; 
background-color: #fff; 
} 
# buy {
Width: 180 px; 
Height: 46 px; 
Background - color: # fa4187; 
color: white; 
border: none; 
} 
# cart {
@ # extend buy; 
Background - color: white. 
Color: # fa4187; 
Border: # 1 px solid fa4187; 
} 
, the Collection, service {
Width: 80 px; 
Height: 46 px; 
border: 1px solid #ccc; 
background-color: #fff; 
} 
} 
} 
. A_wrap {
Height: 66 px; 
Width: 644 px; 
Margin: auto; 
display: flex; 
justify-content: center; 
align-items: center; 
Div {
width: 120px; 
font-size: 16px; 
& : hover {

//& amp; The active {
Color: # fa4187; 
Position: relative; 
& : after {
Content: ""; 
position: absolute; 
Bottom: - 22 px; 
Left: 0 px; 
Width: 64 px; 
height: 0px; 
Border: # 1 px solid fa4187; 
} 
//} 
} 
} 
} 
} 
} 
} 

. Scrollpic {
overflow: hidden; 
position: absolute; 
Left: 434 px; 
top: 0px; 
Width: 400 px; 
height: 400px; 

//display: none; 
Img {
position: absolute; 
Left: 0 px; 
top: 0px; 
Height: 848 px; 
Width: 848 px; 
} 
} 

Why the img width of the browser is 400 px, height is 848 px?

CodePudding user response:

You are the native CSS?
The native CSS cannot be nested braces,
Additional comments in your CSS can only use/* */not to//

CodePudding user response:

refer to the second floor sky waves reply:

you this is a native of CSS?
The native CSS cannot be nested braces,
Additional comments in your CSS can only use/* */not to//

Sass syntax

CodePudding user response:

Annotation to try/* */

CodePudding user response:

references 4 floor sky waves reply:

annotation to try/* */

Is not a problem annotation, sass annotation is//, will automatically switch to CSS comment after save

CodePudding user response:

You seem to set up a

Img {
position: absolute;
Left: 0 px;
top: 0px;
Height: 848 px;
Width: 848 px;
}

You have the position: absolute; Try to get rid of

CodePudding user response:

position: absolute;

Relative to the parent container to reletive see you write here so it feels a layer is the level of the absolute so you messing with the img ran to the scrollpic down so that

. Scrollpic {
overflow: hidden;
position: absolute;
Left: 434 px;
top: 0px;
Width: 400 px;
height: 400px;

//display: none;
Img {
position: absolute;
Left: 0 px;
top: 0px;
Height: 848 px;
Width: 848 px;
}
}

CodePudding user response:

Img ran to the scrollpic down so that

Wrong here

nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull