一个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. python 数据标准化

  2. Faster RCNN算法demo代码解析

    一. Faster-RCNN代码解释 先看看代码结构: Data: This directory holds (after you download them): Caffe models pre-t ...

  3. python中在计算机视觉中的库及基础用法

    基于python脚本语开发的数字图像处理包有很多,常见的比如PIL.Pillow.opencv.scikit-image等.PIL和pillow只提供了基础的数字图像处理,功能有限:OpenCV实际上 ...

  4. chrome 浏览器 添加访问助手来访问网上应用商店

    chrome浏览器的强大之处,在于可以chrome浏览器的扩展程序来实现很多功能.然而不能下载扩展程序.可以借助chrome访问助手来实现: 下载chrome访问助手:https://pan.baid ...

  5. linux开发脚本自动部署及监控

    linux开发脚本自动部署及监控 开发脚本自动部署及监控一.编写脚本自动部署反向代理.web.nfs:要求:1.部署nginx反向代理三个web服务,调度算法使用加权轮询: #!/bin/sh ngx ...

  6. HttpClient 该知道一些概念

    HttpClient 该知道不该知道的一些事 一.简介: Apache开源项目: http://hc.apache.org/ 基于HTTP协议提供强大的支持,构建HTTP客户端应用程序 执行HTTP协 ...

  7. CNCF 旗下首个为中国开发者量身打造的云原生课程，《CNCF x Alibaba 云原生技术公开课》即将上线

    伴随着以 Kubernetes 为代表的云原生技术体系的日益成熟以及 CNCF 生态的逐渐壮大,“云原生”已然成为了未来云计算时代里一个当仁不让的关键词.但是,到底什么是“云原生”?云原生与 CNCF ...

  8. 为什么学习React Native三点原因

    React Native不到两岁,兼容Android平台刚刚1年.我学习React Native其实也就不到1年,不算长,也不算短. Paul Graham在文章中写过:大多数人真正注意到你的时候,不 ...

  9. js写的滑动解锁

    css部分 *{ margin:; padding:; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select ...

  10. SDUT-2144_最小生成树

    数据结构实验之图论九:最小生成树 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 有n个城市,其中有些城市之间可以修建公 ...