代码如下

<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练习篇之16-自定义浏览器窗口大小

    本文来学习下如何通过Selenium方法,设置符合不同测试场景浏览器窗口大小.例如,你有一台机器,最大支持1366*768,你完全可以利用这个机器测试不同分辨率下的场景. 相关测试脚本代码如下: # ...

  2. Detect Vertical&Horizontal Segments By OpenCV

    Detect Vertical&Horizontal Segments By OpenCV,and Save the data to csv. Steps: Using adaptiveThr ...

  3. [错误解决]paramiko.ssh_exception.SSHException: Error reading SSH protocol banner 设置

    报错信息 上午的时候数据组的同事跟我说有几个程序报错,经过查看log发现找到报错信息: paramiko.ssh_exception.SSHException: Error reading SSH p ...

  4. PAT1022

    输入两个非负10进制整数A和B(<=230-1),输出A+B的D (1 < D <= 10)进制数. 输入格式: 输入在一行中依次给出3个整数A.B和D. 输出格式: 输出A+B的D ...

  5. linux下编译lua库

    编辑MakeFile INSTALL_TOP= /usr/local修改为目标install位置 执行 make linux make install 如果提示依赖libreadline  可以直接a ...

  6. leetcode 27 水

    class Solution { public: int removeElement(vector<int>& nums, int val) { int length=nums.s ...

  7. ffmpeg nmb

    搞了一个下午的raw bitstream封装无果然后转战mp4box一秒搞定了 优秀啊..

  8. 适配IPhone X的技巧

    #define TabbarHeight ([[UIApplication sharedApplication] statusBarFrame].size.height>20?83:49) // ...

  9. 洛谷 [P3620] 数据备份

    贪心神题 首先我们发现一个显然的贪心策略,连接相邻两个写字楼总是更优. 所以本题就变成了数轴上一堆点,要选 k 个彼此不相邻的区间,使得区间长度最小 对于 10000 的数据来说,我们可以用 DP 解 ...

  10. [CODEVS1205]单词反转

    给出一个英语句子,希望你把句子里的单词顺序都翻转过来 这个题算是第二次做了……第二次用的C++然而还是写不出来 思路1:用一个数组把读过去的单词存起来,再逆序输出即可 思路2:读入句子后,先在句子开头 ...