代码如下

<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. Git之2分钟教程

    Git之2分钟入门 普通人:“借我1000块钱”.程序猿:“借你1024吧,凑个整”. 今天是1024,是我们程序员的节日,在此,首先祝各位程序猿以及程序媛们节日快乐~然后送出一份节日礼物,没错,就是 ...

  2. 图说不为人知的IT传奇故事-2-IBM咬不动的胡桃

    此系列文章为“图说不为人知的IT传奇故事”,各位大忙人可以在一分钟甚至几秒内了解把握整个内容,真可谓“大忙人的福利”呀!!希望各位IT界的朋友在钻研技术的同时,也能在文学.历史上有所把握.了解这些故事 ...

  3. hihoCoder [Offer收割]编程练习赛83 D 生成树问题

    题目 从 Kruskal 算法的角度来思考这个问题. 考虑 $n$ 个点的"空图"(即没有边的图). 先将 $m_2$ 条无权值的边加到图中,得到一个森林. 按边权从小到大的顺序枚 ...

  4. TOJ 4105 Lines Counting（离线树状数组）

    4105.   Lines Counting Time Limit: 2.0 Seconds   Memory Limit: 150000K Total Runs: 152   Accepted Ru ...

  5. 【距离GDOI：137天】 扩展KMP...字符串QAQ

    上次和黄神两人一合计,干脆我学字符串他学图论,然后两人相互教...但以蒟蒻最近这状态来看,估计会到时候也教不了QAQ 扩展KMP大概是下面这个课件讲的这样 http://wenku.baidu.com ...

  6. windows系统——常用命令

    1.cleanmgr: 打开磁盘清理工具2.compmgmt.msc: 计算机管理3.conf: 启动系统配置实用程序4.charmap: 启动字符映射表5.calc: 启动计算器6.chkdsk.e ...

  7. 【HDU 3746 Cyclic Nacklace】

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...

  8. IOS 滑动指示导航栏 渐变

    关于导航栏渐变,本人在写APP的时候,发现了各路大神各现其通,其实我觉得这个是个很简单的问题,不需要搞得那么麻烦,对个项目要求整齐来说,一般会建一个工具类,自定义View,各个同事需要的时候,直接调用 ...

  9. 【转】Java进阶之路

    1.   引言 搞Java的弟兄们肯定都想要达到更高的境界,用更少的代码解决更多的问题,用更清晰的结构为可能的传承和维护做准备.想想当初自己摸着石头过河,也看过不少人介绍的学习路线,十多年走过来多少还 ...

  10. Python之访问set

    dict的作用是建立一组 key 和一组 value 的映射关系,dict的key是不能重复的. 有的时候,我们只想要 dict 的 key,不关心 key 对应的 value,目的就是保证这个集合的 ...