position自适应布局

来源:互联网 发布:学生管理系统c语言 编辑:程序博客网 时间:2024/06/04 19:48

position绝对布局时,left,right,top,bottom可以同时起作用,从而撑开元素。

示例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>position</title>    <style>        .out{            height: 200px;            position: relative;        }        .inner1{            height: 50px;            background-color: blue;        }        .inner2{            position: absolute;            top: 50px;            bottom: 0;            left: 0px;            right: 0px;            background-color: green;        }    </style></head><body>    <div class="out">        <div class="inner1"></div>        <div class="inner2"></div>    </div></body></html>

这里写图片描述

原创粉丝点击