<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

</head>

<body>

  <div class="div1">

      <div class="div2"></div>

  </div>

</body>

</html>
.div1{

  border:solid 1px red;

  width:100%;

  height:400px;

  position:relative;

  margin-top:80px;

}

.div2{

  border:solid 1px red;

  width:100%;

  height:60px;

  position:absolute;

  margin:auto;

  bottom:; right:;

  box-sizing: border-box;

  border-left:none;

  border-right:none;

  border-bottom:none;

}

http://jsbin.com/miciburuwo/1/

css position:absolute align center bottom的更多相关文章

  1. CSS position:absolute浅析

    一.绝对定位的特征 绝对定位有着与浮动一样的特性,即包裹性和破坏性. 就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度:而绝对定位的元素高度和宽度都没有了. 请看下面代码: <!DOCT ...

  2. css position: absolute、relative详解

    CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置 ...

  3. css position absolute相对于父元素的设置方式

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 大家知道css的position abs ...

  4. css position:absolute 如何居中对齐

    写死宽度,就好弄了 position: absolute;left: 50%;width: 980px;margin-left: -490px; text-algin:center

  5. CSS position: absolute、relative定位问题详解

    CSS2.0 HandBook上的解释:  设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的 ...

  6. css position absolute 浮动特性

    absolute的元素不会占据未浮动的元素的空间<html> <head> <style type="text/css"> .flipbox{ ...

  7. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  8. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  9. css之absolute

    一.absolute和float有相同的特性,包裹性和破坏性 1.absolute和float的相似(看下面的demo,如果图片在左上角,那么用float和absolute都一样) <!doct ...

随机推荐

  1. August 18th 2017 Week 33rd Friday

    If you shed tears when you miss the sun, you also miss the stars. 如果你因为错过太阳而哭泣,你也将会错过繁星. If you have ...

  2. ZT 蓝牙的AVCTP协议笔记

    蓝牙的AVCTP协议笔记 (2013-07-31 08:52:41) 转载▼ 标签: bluetooth avctp command response 分类: Bluetooth 1.概述     A ...

  3. ZT android -- 蓝牙 bluetooth （一） 入门

    android -- 蓝牙 bluetooth (一) 入门 分类: Android的原生应用分析 2013-05-19 21:44 4543人阅读 评论(37) 收藏 举报 bluetooth4.2 ...

  4. java继承-静态绑定和动态绑定

    静态绑定和动态绑定: 静态:程序执行前方法已经被绑定,针对java简单可以理解为程序编译器已的绑定(静态绑定)java当中的方法是final.static.private构造方法都是前期绑定 动态:运 ...

  5. ios 性能优化概述

    在开发IOS程序的时候,不止是简简单单的把代码堆砌起来,或者说有一个比较好的架构,程序就ok的.还需要在程序性能上进行优化.所谓优化,并非只是简单的优化几个算法,让程序看起来跑的更快.优化是有目标的, ...

  6. linux下Python3的安装

    linux平台下,需要gcc和openssl-devel的依赖包,所以没有的话需要先安装: yum -y install gcc*   yum -y install openssl-devel 然后将 ...

  7. 【RabbitMQ】2、RabbitMQ入门程序——Hello World

      首先说一下,MQ全称为Message Queue消息队列是一种应用程序对应用程序的通信方法.应用程序通过读写出入队列的消息(针对应用程序的数据)来通信,而无需专用连接来链接它们.消息传递指的是程序 ...

  8. python3通过qq邮箱发送邮件

    python3通过qq邮箱发送邮件 0.了解qq邮箱的SMTP QQ邮箱 POP3 和 SMTP 服务器地址设置如下: 邮箱 POP3服务器(端口995) SMTP服务器(端口465或587) qq. ...

  9. MyBatis(1)-简单入门

    简介 什么是 MyBatis ? MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.My ...

  10. 【转】CopyOnWriteArrayList

    初识CopyOnWriteArrayList 第一次见到CopyOnWriteArrayList,是在研究JDBC的时候,每一个数据库的Driver都是维护在一个CopyOnWriteArrayLis ...