从今天起 开始细话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. runtime详解2

    Objective-C语言是一门动态语言,它将很多静态语言在编译和链接时期做的事放到了运行时来处理.这种动态语言的优势在于:我们写代码时更具灵活性,如我们可以把消息转发给我们想要的对象,或者随意交换一 ...

  2. 射频识别技术漫谈(9)——动物标签HDX【worldsing笔记】

    半双工(HDX,Half Duplex)技术是ISO11784/11785中规定的另一种标签与读写器之间的通讯方式.读写器先打开射频场对标签充电以激活标签,然后关闭磁场,标签在读写器磁场关闭的情况下向 ...

  3. BAT及各大互联网公司2014前端笔试面试题：HTML/CSS篇

    BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 2014/08/03 · Web前端, 开发 · CSS, HTML, 技术面试 分享到: 188 MongoDB集群之分片技术应用 ...

  4. SpringMVC（三）

    今天是学习Spring的第四天,今天终于又把Spring+SpringMVC+Mybatis(SSM)高了一遍,这次运行的代码和配置和昨天的不一样,今天运行的很成功. 主要学习的一点就是我今天使用的是 ...

  5. CSS层叠样式选择器归纳

     常用选择器 1.1 类型选择器:用来寻找特定类型的元素  标签 { 声明 } p { color:black; } h1 { font-weight:bold; } 1.2 后代选择器: 选择一个元 ...

  6. 重金悬赏的微软：提交Win8漏洞以及发布Win8应用

    随着Windows 8.1这个饱受诟病的操作系统的推出,微软想一举改变颓势,也只有从用户体验上下手了. 近来,微软针对Windows 8.1的漏洞,推出了三项奖励措施: 1.对于发现关键性漏洞,并且这 ...

  7. 如何避免regionServer宕机

    为什么regionserver 和Zookeeper的session expired? 可能的原因有 1. 网络不好. 2. Java full GC, 这会block所有的线程.如果时间比较长,也会 ...

  8. Flash 无法输入中文的修正方法

    在某些运行模式或运行时环境中,Flash 有一个 Bug,文本框与键盘的交互模式会无法输入中文(包括日文等带有输入法状态栏的输入模式),只要对 TextField 文本框实例的 FocusEvent. ...

  9. C#-动态生成40个按钮，大小（20，20），要求每行6个放置

    应该为for (int i=0;i<基本数据DataSet3.Tables [0].Rows .Count ;i++)                 {                 int ...

  10. 用csc命令行手动编译cs文件

    一般初学c#时,用记事本写代码,然后用命令行执行csc命令行可以编译cs文件.方法有两种 1:配置环境,一劳永逸 一般来说在C:\Windows\Microsoft.NET\Framework\v4. ...