HTML/CSS中心內的另一個DIV，使一個div它擴展

HTML看起來像這樣HTML/CSS中心內的另一個DIV，使一個div它擴展

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Oppgave 5</title> 
<style type="text/css"> 

</style> 
</head> 
<body> 
    <div id="animWrap"> 
     <div id="boks"></div> 
    </div> 
</body> 
</html>

我想要做的是使DIV id爲「伯克」擴大和「吃」整個DIV 「animWrap」。

所以我的CSS是如下：

body{ 
    margin: 0px; 
} 

#animWrap{ 
    height: 600px; 
    width: 960px; 
    background-color: rgb(145, 75, 75); 
    margin: auto; 
    position: relative; 
} 

#boks{ 
    width: 250px; 
    height: 175px; 
    top: 200px; 
    left: 380px; 
    background-color: rgb(180, 100, 100); 
    position: absolute; 
    transition: all 5s linear 0s; 
} 

#animWrap:hover #boks { 
    height: 400px; 
    width: 580px; 
}

我注意到的是，它只是擴展到右側，朝下方。可能是因爲它沒有正確居中。有沒有什麼方法可以從中間向每個方向擴展它，只有html和css？

來源

2013-09-16 supererik8

刪除絕對定位，並添加'保證金：0 auto'來自'＃boks' – Pete

當然，你可以這樣做，但你必須應用一個技巧。只需計算剩餘的空間。在這種情況下，我認爲整個div覆蓋的空間是960px，＃bok在懸停時得到了580px，因此左側的空間= 190px，右側= 190px。現在你可以將懸停的CSS是這樣的：

#animWrap:hover #boks { 
    height: 400px; 
    width: 580px; 
    left:190px; 
}

這將這樣的伎倆和動畫在定心。它在我的工作。快樂編碼！乾杯！

來源

2013-09-16 14:14:20 BulletProof47

如果您分別設置#boks寬度&高度100%，並註釋掉它top和left值，它應該填充整個父div：

#boks{ 
    width: 100%; 
    height: 100%; 
    background-color: rgb(180, 100, 100); 
    position: absolute; 
    transition: all 5s linear 0s; 
}

來源

2013-09-16 14:14:31 mannberg

糟糕，錯過了CSS中的懸停選擇器並回答了另一個問題。儘管如此，如果其他人做同樣的誤解，我會留下回答:) – mannberg

HTML/CSS中心內的另一個DIV，使一個div它擴展

回答

相關問題