<!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. 利用 Xunsearch 搭建搜索引擎、内容搜索实战

    Xunsearch 是开源免费.高性能.多功能,简单易用的专业全文检索技术方案,是目前非常知名的开源搜索引擎. 安装完Xunserach,还需要安装PHP SDK,才能进行搜索. ----- 本人已在 ...

  2. [EffectiveC++]item42：了解typename的双重意义

  3. C++课堂作业(1)

    github链接: https://github.com/deepYY/object-oriented/tree/master/Circle 作业题目 Create a program that as ...

  4. 对一串用":"和";"拼接的汉字字符串排序

    近日在项目中遇到一个需求,要求显示的下拉菜单select选项的汉字字符进行排序,项目是前后端分离Ajax交互的,前端页面初始化时请求后端拿到菜单数据.项目中的所有菜单数据均是后端提供的. 场景是后端请 ...

  5. IOS XMPP总结

    //前言:仿weixin实现一个即时通讯的案例,支持版本7.0以上 "准备工作 创建项目时使用git" /* 显示隐藏文件,看到git的文件夹 defaults write com ...

  6. MySQL5.7 不同操作系统下的主从配置

    1. 服务器信息 1.1 Ubuntu 17.0.4  (Master服务器) MySQL版本: 5.7.20 主数据库:dslbcp IP: 192.168.12.130 3306 1.2 Wind ...

  7. canvas学习笔记1

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. python中基于descriptor的一些概念（下）

    @python中基于descriptor的一些概念(下) 3. Descriptor介绍 3.1 Descriptor代码示例 3.2 定义 3.3 Descriptor Protocol(协议) 3 ...

  9. Mysql中函数和存储过程的区别

    Mysql中函数和存储过程的区别 存储过程: 1.       可以写sql语句 2.       inout,out构造返回值 3.       调用:call:存储过程名称 4.       可以 ...

  10. WEB安全 ACCESS 注入、盲注脚本

    http://www.xxx.cn/cp.asp?classid=3http://www.xxx.cn/cp.asp?classid=3 and //有拦截关键字http://www.xxx.cn/c ...