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

﹏ヽ暗。殇╰゛Y 2022-06-10 03:52 204阅读 0赞

先看效果图：

内容少的时候：

![Center][]

内容多的时候：

![Center 1][]

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

[Center]: /images/20220610/0f0261fc9dc548c282c9c5ad26d34ed4.png
[Center 1]: /images/20220610/684572435c8b4dcbbb3a331822d39cd6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，204人围观）

还没有评论，来说两句吧...

相关阅读

相关 div内容居中(div块内容居中)

如何让div内容居中？让div文字居中如果要让DIV中的文字居中，就得用到文字对齐方式代码text-align:center，这个居中默认为水平居中，详细代码写法如下：

男娘i/ 2023年09月26日 11:56/ 0 赞/ 66 阅读

相关 div浮动在div顶部下拉网页浮在顶部（使用插件）

html代码： <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script

曾经终败给现在/ 2022年12月19日 13:16/ 0 赞/ 123 阅读

相关 div逐步变化

div的逐步变化，实际上就是同时改变高度,宽度,left,top,同时运用到缓动的算法，没什么好说的 <script> var isIE = (docume

￡神魔★判官ぃ/ 2022年08月06日 04:21/ 0 赞/ 161 阅读

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

先看效果图：内容少的时候： ![Center][] 内容多的时候： ![Center 1][] 这是设计稿上的需求，有三个div，本来我用的是

﹏ヽ暗。殇╰゛Y/ 2022年06月10日 03:52/ 0 赞/ 205 阅读

相关 html两个div浮动后下一个div怎么换行的问题

欢迎访问我的个人博客：[机器学习之路][Link 1] 刚开始学习网页前端，不懂得问题挺多，总在网上查找相关知识点，但是东西一旦多了就特别难记全了，今天又

朱雀/ 2022年06月05日 00:09/ 0 赞/ 1068 阅读

相关 html如何让其中一个div浮在另一个div上面

（1）方法：设置div样式 z-index:auto auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:999。前

水深无声/ 2022年05月31日 01:16/ 0 赞/ 763 阅读

相关在一个div里面的两个span标签没有对齐，或者在一个div里面的两个div没有对齐

一、在一个div里面的两个span标签没有对齐，如下图红色圈所示 ![20180430201025121][] 红色圈的html如下 <div class=

╰半夏微凉°/ 2022年05月25日 20:19/ 0 赞/ 299 阅读

相关 div 浮在另个div 上面【最简单的做法】

目的：让一个 div 浮在另一个 div 上面。第一步：在父 div 上加一个属性 position:relative; 第二步：在子 div

小鱼儿/ 2022年04月04日 08:00/ 0 赞/ 1953 阅读

相关多个div在一个div中一行水平显示

1.使用 inline-block .an{ display: inline-block; }

小鱼儿/ 2021年09月27日 11:26/ 0 赞/ 411 阅读

相关【CSS】DIV浮动层绝对居中定位

下面的写法兼容IE系列浏览器和火狐浏览器。详细解说，直接看样式： #dingwei{padding:10px;background-color:#003300;co...

测试账号/ 2021年01月10日 05:46/ 0 赞/ 804 阅读