爲什麼溢出：隱藏不起作用？

Question

Overflow:hidden不適合我。灰色框仍留在圖片下方。我不知道它有什麼問題。我使用了youtube教程中的這段代碼。 如果有人能幫助我，我會非常感激。

.main 
 
{ 
 
border: 10px solid white; 
 
width:378; 
 
height:250; 
 
margin:50px auto; 
 
box-shadow:0px 0px 25px black; 
 
overflow:hidden; 
 
} 
 

 
.main:hover img 
 
{ 
 
-webkit-transform:scale(2,2) rotate(45deg); 
 
} 
 

 
.main:hover .content 
 
{ 
 
-webkit-transform:translate(-383px); 
 
} 
 

 
img 
 
{ 
 
-webkit-transition: -webkit-transform: 300ms; \t 
 
} 
 

 
.content 
 
{ 
 
\t width:378; 
 
    \t height:250; 
 
\t background: rgba(118,115,115,0.5); 
 
    -webkit-transition: -webkit-transform: 300ms; 
 
} 
 
    
 
    button 
 
    { 
 
\t width:100%; 
 
\t height:50px; 
 
\t margin-top:200px; 
 
\t background:black; 
 
\t border:0; 
 
\t cursor:pointer; 
 
\t color:white; 
 
\t font:16px tahoma; 
 
    } 
 
    
 
    button:hover { 
 
\t opacity: 0.5; 
 
    }

<div class="main"><img src="img/switch.jpg" height="250" width="378"><div class="content"><button>Pepe Kalvier Switches</button></div></div>

Answer 1

你必須在px或%增加值，在你的代碼沒有你是否要添加px或%或em申報措施即單位。

Demo

這樣的：

.main { 
    width:378px; 
    height:250px; 

} 

Answer 2

與px在.main DIV

.main 
 
{ 
 
border: 10px solid white; 
 
width:378px; 
 
height:250px; 
 
margin:50px auto; 
 
box-shadow:0px 0px 25px black; 
 
overflow:hidden; 
 
    
 
} 
 

 
.main:hover img 
 
{ 
 
-webkit-transform:scale(2,2) rotate(45deg); 
 
} 
 

 
.main:hover .content 
 
{ 
 
-webkit-transform:translate(-383px); 
 
} 
 

 
img 
 
{ 
 
-webkit-transition: -webkit-transform: 300ms; \t 
 
} 
 

 
.content 
 
{ 
 
\t width:378; 
 
    \t height:250; 
 
\t background: rgba(118,115,115,0.5); 
 
    -webkit-transition: -webkit-transform: 300ms; 
 
} 
 
    
 
    button 
 
    { 
 
\t width:100%; 
 
\t height:50px; 
 
\t margin-top:200px; 
 
\t background:black; 
 
\t border:0; 
 
\t cursor:pointer; 
 
\t color:white; 
 
\t font:16px tahoma; 
 
    } 
 
    
 
    button:hover { 
 
\t opacity: 0.5; 
 
    }

<div class="main"><img src="img/switch.jpg" height="250" width="378"><div class="content"><button>Pepe Kalvier Switches</button></div></div>

01添加 height和

Answer 3

width:378; 
height:250; 

添加像素，請

Answer 4

只是糾正你的CSS像這樣...

你CSS

.main { 
    border: 10px solid white; 
    width:378;/* Your mistake is here */ 
    height:250;/* Your mistake is here */ 
    margin:50px auto; 
    box-shadow:0px 0px 25px black; 
    overflow:hidden; 
} 

更新CSS

.main { 
    border: 10px solid white; 
    width:378px; 
    height:250px; 
    margin:50px auto; 
    box-shadow:0px 0px 25px black; 
    overflow:hidden; 
}