您的位置：首页 > Web前端 > CSS

子div在父div居底

2016-03-14 21:34 441 查看

子div在父div居底

简单的一个需求，映射着常常被忽略的知识啊。
上次面试没写出来，得学习。

·思路及要点：

父div的位置设置成相对的，即“position: relative;”。
而子div的位置设置成绝对的，并且下边缘设为0，即“position: absolute; bottom:0;”。

· 代码：

<head>
<title>子div在父div中置底</title>
<styletype="text/css">
   .father { width: 500px; height: 600px; position:relative; background-color: AliceBlue; }
   .child { width: 400px; height: 100px; position:absolute; bottom: 0; background-color: AntiqueWhite; }
</style>
</head>
<body>
<divclass="father">
   <divclass="child">
   </div>
</div>
</body>
</html>

·理论简介

http://apps.hi.baidu.com/share/detail/19629268

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css div

相关文章推荐

新的分享

章节导航