从今天起 开始细话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. vs2015中升级Nuget后，找不到Umbraco安装包问题

    打开VS2015, Tools=>Extensions and Updates=> Updates => Visual Studio Gallery   在这里check一下是否有N ...

  2. Oracle 监听器无法启动（TNS-12555，TNS-12560，TNS-00525）

    启动监听器无法打开,报错! [oracle@localhost ~]$ lsnrctl start LSNRCTL for Linux: Version 11.2.0.1.0 - Production ...

  3. 浅析 ThreadLocal

    一.ThreadLocal类说明 ThreadLocal,很容易让人望文生义,直译"本地线程".ThreadLocal不是一个thread,是thread的局部变量.使用Threa ...

  4. iOS 获取当前月份的天数(转)、

    转:http://www.cnblogs.com/kingbo/p/3966855.html . 获取当前月份有多少天 NSCalendar *calendar = [NSCalendarcurren ...

  5. Apache Options Indexes FollowSymLinks具体解释

     禁止显示Apache文件夹列表-Indexes FollowSymLinks 怎样改动文件夹的配置以禁止显示 Apache 文件夹列表. 缺省情况下假设你在浏览器输入地址: http://loc ...

  6. 实战:ORACLE SQL Performance Analyzer

    通过 SPA,您能够依据各种更改类型(如初始化參数更改.优化器统计刷新和数据库升级)播放特定的 SQL 或整个 SQL 负载,然后生成比較报告,帮助您评估它们的影响. 在 Oracle Databas ...

  7. USB移动硬盘WinPE启动盘的制作方法

    USB移动硬盘WinPE启动盘的制作方法 软件:老九WinPE 老毛桃终于撒手无论版 发行时间:2007年9月11日 制作发行:老毛桃 作用:当系统坏了,无法进入时,用来做系统维护,备份文件.轻巧稳定 ...

  8. python第三方库系列之十九--python測试使用的mock库

    一.为什么须要mock         在写unittest的时候,假设系统中有非常多外部依赖,我们不须要也不希望把全部的部件都执行一遍.比方,要验证分享到微博的功能,假设每次測试的时候都要真实地把接 ...

  9. careercup-排序和查找 11.7

    11.7 有个马戏团正在设计叠罗汉的表演节目,一个人要站在另一人的肩膀上.处于实际和美观的考虑,在上面的人要比下面的人矮一点.轻一点.已知马戏团每个人的高度和重量,请编写代码计算叠罗汉最多能叠几个人. ...

  10. 《Maven_孔浩》Maven介绍及安装

    maven是apache基金会下的一个项目管理工具. 安装步骤 1.下载并解压 2.配置环境变量M2_HOME(解压后的目录):将M2_HOME\bin加入到PATH环境变量中 3.测试:在命令行输入 ...