用浮动代替定位解决动态变化的div内容,一个div浮在两个div上面
2017-08-09 16:59
363 查看
先看效果图:
内容少的时候:
内容多的时候:
这是设计稿上的需求,有三个div,本来我用的是position定位,然而这3个div的内容是动态变化的,有时多,有时少,不能定死高度。所以用position定位就没办法满足需求了。只能用浮动了。
HTML代码如下:
<div class="StepContent"> </div>
<div class='StepsOne'></div>
<div class="clear"></div>//清除浮动用的
<div id="tempContent"></div>
CSS代码如下:
.StepContent{
padding: 0 0 0.5rem;
border-radius: 8px;
background-color: #ffffff;
width: 97%;
margin: 0 auto;
color: #969696;
font-weight: bold;
}
.StepsOne{
padding: 0 0 0.2rem;
border-radius: 0.08rem;
background-color: #a0a0a0;
width: 90%;
color: #ffffff;
font-weight: bold;
//浮动此div
float: left;
margin-top: -0.3rem;//margin用负的
margin-left: 5%;
}
.clear{
clear: both;//清除浮动用的
}
#tempContent{
margin-top: -0.3rem;//margin用负的
}
内容少的时候:
内容多的时候:
这是设计稿上的需求,有三个div,本来我用的是position定位,然而这3个div的内容是动态变化的,有时多,有时少,不能定死高度。所以用position定位就没办法满足需求了。只能用浮动了。
HTML代码如下:
<div class="StepContent"> </div>
<div class='StepsOne'></div>
<div class="clear"></div>//清除浮动用的
<div id="tempContent"></div>
CSS代码如下:
.StepContent{
padding: 0 0 0.5rem;
border-radius: 8px;
background-color: #ffffff;
width: 97%;
margin: 0 auto;
color: #969696;
font-weight: bold;
}
.StepsOne{
padding: 0 0 0.2rem;
border-radius: 0.08rem;
background-color: #a0a0a0;
width: 90%;
color: #ffffff;
font-weight: bold;
//浮动此div
float: left;
margin-top: -0.3rem;//margin用负的
margin-left: 5%;
}
.clear{
clear: both;//清除浮动用的
}
#tempContent{
margin-top: -0.3rem;//margin用负的
}
相关文章推荐
- 解决不固定的内容的动态维护与选择(跟随TextBox的DIV)
- 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法
- html中用div代替textarea实现输入框高度随输入内容变化
- jQuery实现鼠标悬浮在div上时候动态浮动另外一个div层盖住第一个div层
- 如何让一个DIV浮动在另一个DIV上面
- 迁入阿里云后:解决了一个IIS动态内容压缩的问题
- 记忆碎片---div叠加覆盖,上下两个div做背景,上面浮动div框
- 如何让一个div的大小,从某一个特定值开始,随内容的增加而自动变化?
- 发布一个jquery插件:jBox-支持div内容inline内容iframe内容的浮动窗口
- 通过浮动+定位实现两个div在同一行
- 【CSS+Html】解决左右浮动的两列内容,随浏览宽度变化而自适应?
- 在一个div中有两个子元素,子元素浮动,左边div高度随右边变化
- 在一个div内,动态添加一段文字,如何设置为不管内容多少都以 上下垂直居中 的形式展现?
- 大并发访问同一个不存在的cache的两个解决方法
- 动态生成GRIDVIEW,将两个表数据绑定到一个GRIDVIEW中.
- js处理一个div里面多个点击事件时出现的事件冲突 重复的解决方法 事件冒泡
- Jquery学习-用Jquery添加一个按扭后无法动态对该按扭实行监听解决方法
- 关于css清除浮动,解决内容溢出的问题
- css+js教你实现一个动态颜色变化的圈中圈
- 解决了DIV+CSS一个问题