元素在div中底部显示

快乐打工仔 分类:实例代码

元素在div中底部显示属于前端实例代码,有关更多实例代码大家可以查看

在实际应用中可能需要将一个元素在一个div中底部显示,下面就通过代码实例介绍一下如何实现此效果。

代码如下:

<!DOCTYPE html>     
<html>     
<head>     
<meta charset=" utf-8">     
<meta name="author" content="http://www.pipipi.net/" />     
<title>犀牛前端部落</title>  
<style type="text/css">
.box{
  height:250px;
  width:250px;
  background:green;
  position:relative;
}
.inner{
  width:50px;
  height:50px;
  background:red;
  position:absolute;
  bottom:0px;
  left:50%;
  margin-left:-25px;
}
</style>
</head>
<body>
<div class="box">
  <div class="inner"></div>
</div>
</body>
</html>

代码将内部的div底部居中显示,实现的原理非常的简单就是讲父元素设置为相对定位,子元素使用绝对定位,然后设置资源在垂直方向是底部对齐,至于居中就是一个数学问题了,非常的简单不多介绍了。

相关阅读:

(1).相对定位参阅CSS的相对定位一章节。 

(2).绝对定位参阅CSS的绝对定位一章节。

元素在div中底部显示,这样的场景在实际项目中还是用的比较多的,关于元素在div中底部显示就介绍到这了。

回复

我来回复
  • 暂无回复内容