代码如下

<style type="text/css">

.box1 {border:1px #cccccc solid;  width:500px; height:600px;position:relative;}

.box2 {border-top:1px #cccccc solid; background:#f2f6fb; width:498px; height:22px; position:absolute; bottom:1;background-color:red;}

</style>

<div class="box1">

    <div class="box2"></div>

</div>

DIV相对于父DIV底部对齐的实现方法的更多相关文章

  1. 让div盒子相对父盒子垂直居中的几种方法

    div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...

  2. CSS布局之div交叉排布与底部对齐--flex实现

    最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...

  3. 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 ...

  4. css 父div如何包裹带有float属性的子div,float子div如何撑开父div

    来自网络摘抄 原始代码 <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...

  5. 子div设置float后会导致父div无法自动撑开

    本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 注: 文章部分转载 彩泉 - 博客园 原因:内部的DIV因为float:l ...

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

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

  7. CSS多种方式实现底部对齐

    CSS实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果: 效果说明: 1.红色区域数据需要倒排(即从底部开始数,数字为1.2.3.4.5),并且显示在最底部 2.当数据过多时需要显示滚动 ...

  8. Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue 父组件往子组件传递方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. MFC深入浅出读书笔记第二部分2

    第七章  MFC骨干程序 所谓骨干程序就是指有AppWizard生成的MFC程序.如下图的层次关系是程序中常用的几个类,一定要熟记于心. 1 Document/View应用程序 CDocument存放 ...

  2. uncompyle2反编译python的.py文件

    前几天学用github,一不小心把a.py文件给删除了,由于1天没有提交,也无法找回.突然发现同a.py文件生成的编译文件a.pyc还在,逐去搜索一番反编译的方法. 查询得知python比较好的工具u ...

  3. icpc南昌邀请赛 比赛总结

    上周末,我参加了icpc南昌区域赛邀请赛,这也是我的第一次外出参赛. 星期五晚上,在6个小时的火车和1个小时的公交后,我们终于抵达了江西师范大学,这次的比赛场地.江西师范大学周围的设施很齐全,各种烧烤 ...

  4. Halcon11 Linux 下载

    Halcon11 Linux下载地址:http://www.211xun.com/download_page_3.html HALCON 11 是一套机器视觉图像处理库,由一千多个算子以及底层的数据管 ...

  5. js判断时间是否过期

    var myDate=new Date(); myDate.setFullYear(2014,2,1); //2014年3月1日 //注意:表示月份的参数介于 0 到 11 之间.也就是说,如果希望把 ...

  6. 纸上得来终觉浅，绝知此事要躬行——Spring boot任务调度

    前言:之前今日开讲项目的时候,用到了Quartz进行任务调度.后来做一个电商项目的时候,还用到了Quartz任务调度. 觉得挺简单的,a peace of cake.  忽略了总结,当时闭着眼睛都能捉 ...

  7. iis特殊后缀文件下载404

    项目中有特殊类型的文件上传到服务器,下载的时候报404,下载不下来.如后缀名为qwwq这种类型. 因为遇到过这种情况,以前都是配置mime类型好的,但是这次没有找到,到底应该配置什么mime类型,一时 ...

  8. ansible中playbook使用

    palybook使用 ####yaml语法ansible中使用的yaml基础元素:变量Inventory条件测试迭代 playbook的组成结构InventoryModulesAd Hoc Comma ...

  9. [cocos2dx enhancement] CCPlatformMacros.h

    为了更好的调试Log,优化CCLOG格式 path: cocos2dx/platform/CCPlatformMacros.h line 218: #define CCLOGERROR(format, ...

  10. 一些echarts的基本图形

    先拿一个图形渲染过程举例 引用处 <bar ref="ARPUChart" v-if="ARPUChart" style="width:500p ...