代码如下

<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. Python+Selenium练习篇之11-浏览器上前进和后退操作

    本文来介绍上如何,利用webdriver中的方法来演示浏览器中地址栏旁边的前进和后退功能. 相关脚本代码如下: # coding=utf-8import timefrom selenium impor ...

  2. Leetcode 500.键盘行

    键盘行 给定一个单词列表,只返回可以使用在键盘同一行的字母打印出来的单词.键盘如下图所示. 示例: 输入: ["Hello", "Alaska", " ...

  3. sqlserver执行时间和自行效率

    SET STATISTICS PROFILE ON --SET STATISTICS IO ON --SET STATISTICS TIME ON declare @dtm datetime SQL语 ...

  4. [oldboy-django][5python基础][高级特性]Iterator迭代器

    # 区分可迭代对象iterable, 迭代器iterator, 生成器generator a. iterable 可直接用for循环的对象,都称为可迭代对象, from collections imp ...

  5. CodeForces Round #521 (Div.3) A. Frog Jumping

    http://codeforces.com/contest/1077/problem/A A frog is currently at the point 00 on a coordinate axi ...

  6. BZOJ 1087：[SCOI2005]互不侵犯King（状压DP）

    [SCOI2005]互不侵犯King [题目描述] 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子 ...

  7. 【bzoj1095】[ZJOI2007]Hide 捉迷藏 动态点分治+堆

    题目描述 捉迷藏 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏.他们的家很大且构造很奇特,由N个屋子和N-1条双向走廊组成,这 ...

  8. mysql里制造一个错误

    最近突然想到的,由于在触发器中执行失败事务性表会自动回滚. 所以就想制造一个错误,在群里问了问最后还真得到一个制造错误的方法,或者可以叫做自定义异常 SIGNAL SQLSTATE ' SET MES ...

  9. Dos中查看mysql数据时 中文乱码

    使用jsp页面查看数据时可以正确显示中文,但是dos窗口查看数据时中文显示乱码. 上网查了一下原因:之所以会显示乱码,就是因为MySQL客户端输出窗口显示中文时使用的字符编码不对造成的,可以使用如下的 ...

  10. GDOI2018 爆零记，Challenge Impossibility

    蒟蒻的GDOI又双叒叕考挂啦...... Day 0 && Day -1 学校月考,貌似考的还不错? 然而考完试再坐船去中山实在是慢啊......晚上10点才到酒店 wifi差评... ...