为什么溢出：隐藏不起作用？

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;	
}

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

您必须在$sth->execute ( $routingSeq, $origin, "\'$positionAccID\'", "\'$publishDate\'", $transActID, "\'$settlementDate\'", $sourceID, "\'$settlementCurrency\'", $sodSnapshot, $recordStatus, $balanceType, $latest, $currentValue, $changedValue, "\'$reference\'", "\'$bankCode\'", "\'$TxRef\'", "\'$lastTxDateTime\'", $balanceSubType, "\'$positionID\'", "\'$secAccID\'", $location, $purpose, $updateSequence ); 或System.Diagnostics.Process printProcess = new System.Diagnostics.Process(); printProcess.StartInfo.FileName = "notepad.exe"; printProcess.StartInfo.Parameters = "/P D:\\testWordPad1.txt"; printProcess.StartInfo.CreateNoWindow = true; printProcess.Start(); printProcess.WaitForExit(); 中添加值，在您的代码中，您没有声明一个度量单位，即您是否要添加px或{ {1}}或%。

<强> Demo

像这样：

px

Answer 2

在height div

中添加width和px .main

.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;	
}

.content 
{ 
	width:378;
 	height:250;
	background: rgba(118,115,115,0.5);
    -webkit-transition: -webkit-transform: 300ms;
}
   
   button 
   {
	   width:100%;
	   height:50px;
	   margin-top:200px;
	   background:black;
	   border:0;
	   cursor:pointer;
	   color:white;
	   font:16px tahoma;
   }
   
   button:hover {
	  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 3

width:378;
height:250;

添加px，请

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;
}