码迷,mamicode.com
首页 > Web开发 > 详细

CSS 27 贴在下方

时间:2020-07-15 23:43:28      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:tom   relative   div2   color   class   蓝色   otto   css   png   

步骤 1 : 

一个div始终贴在下方

首先把蓝色div设置为相对定位

然后把内部的绿色div设置为绝对定位, bottom: 0表示贴在下面

<style>
     #div1
        {
            position: relative;
            height: 300px;
            width: 90%;
            background-color: skyblue;
        }
        #div2
        {
            position: absolute;
            bottom: 0;
            height: 30px;
            width: 100%;
            background-color: lightgreen;
        }
    </style>
 
<div id="div1">
    <div id="div2"> 无论蓝色div高度如何变化,绿色div都会贴在下面
    </div>
</div>

技术图片

 

CSS 27 贴在下方

标签:tom   relative   div2   color   class   蓝色   otto   css   png   

原文地址:https://www.cnblogs.com/JasperZhao/p/13307675.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!