从今天起 开始细话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. 使用Windows的分析等待链（analyze wait chain）来诊断没用响应的应用

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:使用Windows的分析等待链(analyze wait chain)来诊断没用响应的应用.

  2. cc2530 timer 3 PWM <可调占空比>

    前提: 开始用的是 cc2530 timer 1来做PWM的,已经可调占空比了,但是由于硬件的改动,需要用timer 3 和 timer 4 代替.由于调试过程中出了些小问题,于是自己把这个贴出来.关 ...

  3. 使用CATransition实现页面的“从左向右” “从右向左”的动画

    -(void)initView{ UISwipeGestureRecognizer *left_gesture=[[UISwipeGestureRecognizer alloc]initWithTar ...

  4. powershell.exe直接运行命令

    powershell.exe -Command "& { ('time={0},user={1}' -f (get-date),(whoami)) | Out-File " ...

  5. 多边形背景生成工具推荐-Trianglify

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 low poly低多边形(相似于折纸的效果),多边形风格的设计应用越来越多,今天我们就来看一个利用d3.js写成的生成器Triangli ...

  6. 0 Explore TreeView

    尽可能接近WINDOWS 8的资源管理器效果(这里只模仿它的效果,处理文件功能不包括在内)   TREEVIEW可以增加空白并且空白处不能单击 重绘三角箭头 重绘选中时的边框和填充色 重绘失去焦点时选 ...

  7. Android中文乱码彻底解决

    以下是我研究的成果,希望对您有帮助: sb = new StringBuffer(); HttpEntity entity = response.getEntity(); InputStream is ...

  8. java中的url 编码与解码

    什么是application/x-www-form-urlencoded字符串? 答:它是一种编码类型.当URL地址里包含非西欧字符的字符串时,系统会将这些字符转换成application/x-www ...

  9. php中用户自定义排序

    php中数组用户自定义排序函数有usort和uasort,前者键值重新排列,后者保持原数组的键值. 举例usrot: usort($filterArr, 'sortArr'); function so ...

  10. 运维知识体系v0.5

    http://www.90qj.com/?post=318http://ixdba.blog.51cto.com/2895551/1751377   运维知识体系v0.5-(运维社区-赵班长出品,欢迎 ...