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它扩展

回答

相关问题