代码如下

<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. RSA进阶之共模攻击

    适用场景: 同一个n,对相同的m进行了加密,e取值不一样. e1和e2互质,gcd(e1,e2)=1 如果满足上述条件,那么就可以在不分解n的情况下求解m 原理 复杂的东西简单说: 如果gcd(e1, ...

  2. php字符串 函数

    strtolower()//字符串转化小写的字母 $str="abcdEfG";$s=strtolower($str); 输出:abcdefg; strtoupper();字符串转 ...

  3. excel模板解析前后设计变化，以及我对此的看法和感受

    前言:近期也在做Excel模板的解析工作,目前来说,应该是第三版了.我最开始做的,就是垒鸡窝,虽然考虑了1.0提出的关于excel解析的一些建议和问题(单个模板),但是真的毫无设计可言.就几个工具类, ...

  4. PAT1032

    为了用事实说明挖掘机技术到底哪家强,PAT组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第1行给出不超过105的正整数N,即参赛人数.随后N行,每行给出一位 ...

  5. PHP排序的几种方法

    // 冒泡排序 function BubbleSort($arr) { // 获得数组总长度 $num = count($arr); // 正向遍历数组 for ($i = 1; $i < $n ...

  6. HTML中使用JavaScript

    1.script中使用src引入外部js.注意:不能是<script />,必须是<script></script> 2.使用link引入外部js 3.使用scri ...

  7. 【bzoj3879】SvT 后缀数组+倍增RMQ+单调栈

    题目描述 (我并不想告诉你题目名字是什么鬼) 有一个长度为n的仅包含小写字母的字符串S,下标范围为[1,n]. 现在有若干组询问,对于每一个询问,我们给出若干个后缀(以其在S中出现的起始位置来表示), ...

  8. bzoj3609【HEOI2014】人人尽说江南好

    题意:http://www.lydsy.com/JudgeOnline/problem.php?id=3609 sol :博弈论  通过打表找规律,发现答案是%m循环的,且当m为偶数时取反  因为我太 ...

  9. create-react-app 配置支持sass并集成autoprefixer插件

    create-react-app的webpack配置在node_modules当中的react-scripts的config文件夹当中,其中webpack.config.dev.js是开发环境的配置, ...

  10. 【HDOJ5532】Almost Sorted Array（签到）

    题意:给定一个n个数的数列,问删掉一个数之后剩余部分是否可以单调不增或单调不减 n<=1e5,a[i]<=1e5 思路:预处理一下前后缀是否合法 #include<cstdio> ...