纵向进度条向上过度&&子div撑不开父div

最新推荐文章于 2023-12-21 22:15:00 发布

xixiaixinxin

最新推荐文章于 2023-12-21 22:15:00 发布

阅读量553

点赞数

分类专栏： html&&css

本文链接：https://blog.csdn.net/xixiaixinxin/article/details/52116643

版权

html&&css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

纵向进度条向上过度

分析：span和两个div全部绝对定位。

#div1{
width: 100px;
height: 300px;
background: rosybrown;
position: absolute;
border: 2px solid red;
}
#div2{
width: 100px;
background: #0000ff;
height: 11px;
position: absolute;
bottom: 0;
left: 0;
opacity:0.2;
transition:all 2s ease;
}
span{
display: block;
position: absolute;
z-index: 9999;
color: brown;
font-size: 36px;
line-height:300px;
}
#div2:hover{
height: 200px;
}

子div撑不开父元素：

1：子元素float父div撑不开解决方案：

/*方案3：常用方法
给父元素加：overflow：hidden
方案4：常用方法
给父元素添加：display:table
*/
/*
方案一：容易有bug不建议使用
子div被float之后就丢失了clear：both和display：block样式，所以外部的div不会被撑开
想让父div撑开解决方案：在最下面添加<div style="clear:both;"></div>。这样，其实就在最后增加了clear的动作。
*/

xixiaixinxin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纵向进度条向上过度&&子div撑不开父div

纵向进度条向上过度分析：span和两个div全部绝对定位。 #div1{ width: 100px; height: 300px; background: rosybrown; position: absolute; border: 2px sol
复制链接

扫一扫

专栏目录