从今天起 开始细话div布局
 
思路及要点：
父div的位置设置成相对的，即“position: relative;”。
而子div的位置设置成绝对的，并且下边缘设为0，即“position: absolute; bottom: 0;”。
 
代码
 <head>

     <title>子div在父div中置底</title>

     <style type="text/css">

         .father { width: 500px; height: 600px; position: relative; background-color: AliceBlue; }

         .child { width: 400px; height: 100px; position: absolute; bottom: ; background-color: AntiqueWhite; }

     </style>

 </head>

 <body>

     <div class="father">

         <div class="child">

         </div>

     </div>

 </body>

 </html>

大致效果

ok  学习要坚持  不要贪多~~~

 

【html】【8】div布局[子div在父div居底]的更多相关文章

  1. 子div设置浮动无法把父div撑开。

    <div class="mainBox"> <div class="leftBox"></div> <div clas ...

  2. 子div设置float后导致父div无法自动撑开的问题

    子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...

  3. DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV

    DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...

  4. DIV布局之道二：DIV块的嵌套，DIV盒子模型

    本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...

  5. 子元素div高度不确定时父div高度如何自适应

    粘自:http://www.jb51.net/css/110652.html 在最外层div加以下样式 height:100%; overflow:hidden; 其它方法: Div即父容器不根据内容 ...

  6. iframe弹出层中关闭包含iframe的div（子页面调用父页面js函数）

    父页面: <div id="win2" style=" width:300px; height:200px; border:1px solid red;" ...

  7. 让一个小Div（子）在大Div（父）中垂直水平都居中

    方法1: .parent {          width:800px;          height:500px;          border:2px solid #000;          ...

  8. Position a child div relative to parent container in CSS: [设置 子DIV位置 跟 父DIV相关联]

    最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-po ...

  9. 子div设置margin-top使得父div也跟着向下移动

    之前在写网页的时候,发现一个小问题,就是子div设置margin-top的时候,父的div也会跟着向下移动.我用代码和图描述一下问题: <span style="font-size:1 ...

随机推荐

  1. 射频识别技术漫谈(10)——识别号的格式变化【worldsing笔记】

    从事RDID行业的朋友经常会遇到这样的情况,同一张ID卡,在不同厂家生产的读卡器上读出的识别号完全不一样,有时甚至差之千里.ID卡的识别号一般是在出厂时被固化在卡片的ROM里,本身是不会改变的,问题出 ...

  2. CC_CALLBACK原理及应用

    http://my.oschina.net/u/555701/blog/219844 c++ 11 基础 :     std::function 类模版 std::function是一种通用.多态的函 ...

  3. CentOS下用Tomcat+Zookeeper+Nginx+Solr完美搭建SolrCloud平台（五）

    六.修改 /etc/rc.d/rc.local 文件,设置开机自启动 1.nginx 主机的设置 [root@nginx 桌面]# vi /etc/rc.d/rc.local #!/bin/sh to ...

  4. sql STUFF用法

    sql STUFF用法 1.作用 删除指定长度的字符,并在指定的起点处插入另一组字符. 2.语法 STUFF ( character_expression , start , length ,char ...

  5. cocos2d-x与ios内存管理分析(在游戏中减少内存压力)

    转自:http://www.cocos2dev.com/?p=281 注:自己以前也写过cocos2d-x如何优化内存的使用,以及内存不足的情况下怎么处理游戏.今天在微博中看到有朋友介绍了下内存,挺详 ...

  6. 【转】SQL语句中的正则表达示

    正则表达式作用是匹配方本,将一个模式(正则表达式)与一个文本串进行比较. MySQL用WHERE子句对正则表达式提供了初步的支持,允许你指定用正则表达式过滤SELECT检索出的数据. MySQL仅支持 ...

  7. document.location的属性

    示例html完整路径为: http://10.10.3.117:8500/html/ypt/index.html alert("document.location.href:"+d ...

  8. GPS（Global Positioning System）全球定位系统

    GPS构成: 1．空间部分 GPS的空间部分是由24 颗工作卫星组成,它位于距地表20 200km的上空,均匀分布在6 个轨道面上(每个轨道面4 颗) ,轨道倾角为55°.此外,还有4 颗有源备份卫星 ...

  9. ListView中不同类型view的实现

    首先创建请求队列,一个活动中只需要一个,因此放在Application中: public class MyApplication extends Application{ private static ...

  10. 一段JavaScript代码

    eval(function(p, a, c, k, e, d) { e = function(c) { return c.toString(36) }; if (!''.replace(/^/, St ...