<!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. JS实现手机摇一摇功能

    //运动事件监听 if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler, ...

  2. 乘风破浪：LeetCode真题_008_String to Integer (atoi)

    乘风破浪:LeetCode真题_008_String to Integer (atoi) 一.前言 将整型转换成字符串,或者将字符串转换成整型,是经常出现的,也是必要的,因此我们需要熟练的掌握,当然也 ...

  3. TCP/IP 协议图--网络层中的 IP 协议

    IP(IPv4.IPv6)相当于 OSI 参考模型中的第3层——网络层.网络层的主要作用是“实现终端节点之间的通信”.这种终端节点之间的通信也叫“点对点通信”. 网络的下一层——数据链路层的主要作用是 ...

  4. Linux下文件的打包、解压缩指令——tar，gzip，bzip2，unzip，rar

    本文是笔者对鸟叔的Linux私房菜(基础学习篇) 第三版(中文网站)中关于 Linux 环境下打包和解压缩指令的内容以及日常操作过程中所接触的相关指令的总结和记录,以供备忘和分享.更多详细信息可直接参 ...

  5. ECharts 图表设置标记的大小 symbolSize 和获取标记的值

    ECharts 是百度出品,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...

  6. vim基础初步

    vim文本编辑器初步 一.跟vi编辑器的关系 可以说vim编辑器是vi编辑器的升级版,它保留了vi编辑器的所有东西,而且加入了自己的新的特性. 比如说:支持跨平台,支持语法高亮,支持多级撤销等. ++ ...

  7. iOS开发中的Markdown渲染

    iOS开发中的Markdown渲染 BearyChat的消息是全面支持Markdown语法的,所以在开发BearyChat的iOS客户端的时候需要处理Markdown的渲染. 主要是两套实现方案: 直 ...

  8. tcp的三次握手：通信的本质：通信通知与信息交换

    tcp的三次握手:通信的本质:通信通知与信息交换

  9. 解决MySQL新建用户后无法登录问题

    在PHPMyAdmin里创建了一个新的用户,并且创建了密码,但是却一直无法使用这个账户登录到MySQL里. 解决过程分享给大家~ 1.以root身份登录mysql 2.删除MySQL中默认存在一个用户 ...

  10. random模块 参生随机数

    记得要import random模块 随机整数: >>> import random >>> random.randint(0,99) 21 随机选取0到100间的 ...