欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

用浮动代替定位解决动态变化的div内容,一个div浮在两个div上面

程序员文章站 2022-03-29 23:37:24
...

先看效果图:

内容少的时候:

用浮动代替定位解决动态变化的div内容,一个div浮在两个div上面

内容多的时候:

用浮动代替定位解决动态变化的div内容,一个div浮在两个div上面


这是设计稿上的需求,有三个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用负的
    }








相关标签: 浮动 定位