一个div如何与另一个div底部对齐,方法有很多,比如使用绝对定位

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div1 {
position:relative;
width: 270px;
height: 15px;
background-color:#F00;
margin:0px;
padding:0px;
}
.div2 {
position:absolute;
bottom:0px;
width: 200px;
border:5px solid #3CC;
background:#000;
}
</style>
</head> <body>
<div class="div1">
<div class="div2"></div>
</div>
</div>
</body>
</html>

一个div居于另一个div底部的更多相关文章

  1. css笔记:如何让一个div居于页面正中间

    如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果 ...

  2. 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  3. 如何让一个div居于页面正中间

    如何让一个div居于页面正中间 如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,le ...

  4. 点击一个div隐藏另一个div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. DIV+CSS常见问题:DIV如何设置一个像素高度?

    CSS如何控制DIV实现1像素高度呢?问题看起来很简单,但万恶的IE6会让你很麻烦,不过解决办法很多,本文将介绍最简单的一种:DIV{height:1px;line-height:1px;font-s ...

  6. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  8. 一个div在另一个div中水平垂直的方法

    html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...

  9. JaveWeb 公司项目(1)----- 使Div覆盖另一个Div完成切换效果

    最近在做网页,用的是CSS+DIV的布局方法,搭建了一个简易的界面,大体上分为三个部分,如图所示: 左侧的为主功能导航栏,右侧是具体的功能实现,下方是固定的版权声明,单击左边不同的导航按钮,在div中 ...

随机推荐

  1. H5C3--sessionStorage和localStorage的使用

    一.sessionStorage的使用 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  2. Vue--vue中常用的ECMAScript6语法

    1.对象的写法 es5中对象: {add:add,substrict:substrict} es6中对象: {add,substrict} 注意这种写法的属性名称和值变量是同一个名称才可以简写,否则要 ...

  3. 第十章—DOM(二)——Element类型

    Element类型用于表现HTML和XML,提供了对元素标签名,子节点和特效的访问.Element节点具有以下特征: 要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性.这 ...

  4. poj 2001 Shortest Prefixes(字典树trie 动态分配内存)

    Shortest Prefixes Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 15610   Accepted: 673 ...

  5. cnn.py cs231n

    n import numpy as np from cs231n.layers import * from cs231n.fast_layers import * from cs231n.layer_ ...

  6. jsp之jstl(展示所有商品、重写登录案例)

    jsp之jstl jstl: jsp标准的标签库语言,apache的,是用来替代java脚本 使用步骤: 1.导入jar包 (jstl.jar和standard.jar) 2.在页面上导入标签库 &l ...

  7. laravel 图片上传 intervention/image

    1. composer require intervention/image 2). 修改 app/config/app.php 添加 ServiceProvider: // 将下面代码添加到 pro ...

  8. cmd 命令重启远程服务器

    今天,连接服务器突然无法连接远程桌面,更无法重新启动机器,先进行了ping  操作: 机器运行正常... 后通过远程软件发现,可以用命令...这是一个新发现  …^ .^ 1.输入cmd  运行正常. ...

  9. 寒哥教你学iOS - 经验漫谈

    http://www.jianshu.com/p/cb54054d3add 寒哥教你学iOS - 经验漫谈 字数2848 阅读1896 评论19 喜欢43 顺便来个广告 iOS开发者 群1734993 ...

  10. GCD使用经验与技巧浅谈

    前言 GCD(Grand Central Dispatch)可以说是Mac.iOS开发中的一大“利器”,本文就总结一些有关使用GCD的经验与技巧. dispatch_once_t必须是全局或stati ...