<!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. Asp.Net MVC Identity 2.2.1 使用技巧（七）

    创建角色管理相关视图 1.添加视图 打开RolesAdminController.cs   将鼠标移动到public ActionResult Index()上  右键>添加视图   系统会弹出 ...

  2. The good life is one inspired by love and guided by knowledge

    The good life is one inspired by love and guided by knowledge 伯特兰·罗素Bertrand Russell18721970 I can a ...

  3. elasticsearch 相关

    1.对elsasticsearch index的解释,What exactly is an index in Elasticsearch ? basic definition An index is  ...

  4. linux下批量重命名文件

    # 使用通配符批量创建 多个文件:$ touch zqunor{1..7}.txt # 批量将多个后缀为 .txt 的文本文件重命名为以 .c 为后缀的文件:$ rename 's/\.txt/\.c ...

  5. windows ionic bash: command not found

    安装好了node.js和npm后,执行npm install -g cordova ionic后,成功安装,但是执行ionic命令后,返回 command not found. 配置好了环境变量后,仍 ...

  6. HDU 3038 How Many Answers Are Wrong（带权并查集，真的很难想到是个并查集！！！）

    How Many Answers Are Wrong Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Ja ...

  7. Reading Meticulous Measurement of Control Packets in SDN

    SOSR 17 概要 网络流量中有一部分是用于网络管理,(根据packet process survey,该部分流量属于包转发的slow path部分)由于sdn的数控分离,交换机需要向控制器发送大量 ...

  8. SwaggerUI用户手册

    SwaggerUI是一个非常好用的API文档工具,最关键的是他还能在工具内调试API,简直爽的不要不要的~网上针对开发者的文档非常多,但是给用户的手册却非常少.所以我来简单写个用户手册,供没有使用过s ...

  9. vue项目中分享到朋友圈，调用微信接口

    虽然微信提供了jssdk,不代表可以点击按钮进行分享到朋友圈,是需要微信自带的浏览器右上角进行分享.手机浏览器需要浏览器支持分享到朋友圈的分享机制. 微信jssdk地址: https://mp.wei ...

  10. 设置PL/SQL Developer 字符集

    本文转自:http://blog.itpub.net/26613085/viewspace-765429/ 适用于:客户端和服务端不一致的情况,或者客户端某个字段的值乱码