使用浮点数来折叠其他div

Question

更新1：

嘿，因为堆栈代码段不支持jss，所以我使用了代码沙箱。我得到了解决方案，但现在它不是从f rom 0、1、2、3开始的，而是从相反的方向开始的。你们能告诉我如何解决它吗？在下面提供我的代码段

.container {border:1px solid #000; padding: 5px;text-align:justify;}
.right_container{float:right;border: 1px solid #000;background: #f60;padding: 10px;}
.right_box {border:1px solid #000; padding: 5px;background:  #ff0; margin: 10px; float:right; width:50px; height:50px;}
.clr{clear:both;}

<div class="container">
    <div class="right_container">
        <div class="right_box"></div>
        <div class="right_box"></div>
    </div>
    
    <div class="right_box">0</div>
    <div class="right_box">1</div>
    
     <div class="right_box">2</div>
    <div class="right_box">3</div>
    
     <div class="right_box">4</div>
    <div class="right_box">5</div>
    
     <div class="right_box">6</div>
    <div class="right_box">7</div>
    
    <div class="right_box">8</div>
    <div class="right_box">9</div>
    
    <div class="right_box">10</div>
    <div class="right_box">11</div>
    
    <div class="right_box">12</div>
    <div class="right_box">13</div>
    
    <div class="right_box">14</div>
    <div class="right_box">15</div>
    
     <div class="right_box">16</div>
    <div class="right_box">17</div>
    
     <div class="right_box">18</div>
    <div class="right_box">19</div>
    
     <div class="right_box">20</div>
    <div class="right_box">21</div>
    
    <div class="right_box">22</div>
    <div class="right_box">23</div>
    
    <div class="right_box">24</div>
    <div class="right_box">25</div>
    
    <div class="right_box">26</div>
    <div class="right_box">27</div>
    
    <br class="clr" />
    
    
    
    
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>   
    
</div>

• 我使用以下示例，并尝试使用float right属性修复我的布局 https://www.w3schools.com/cssref/tryit.asp?filename=trycss_float_clear_overflow

• 使用float right属性，我可以将运动状态保持在右上角。

• 但是当我将屏幕移到较小尺寸时，下面的div并没有像w3schools中显示的lorem文本那样结束。
• 你能告诉我如何解决它吗？
• 在下面提供我的沙盒和代码段

https://codesandbox.io/s/material-demo-9s6ts 屏幕更大，您可以看到整个输出https://9s6ts.codesandbox.io/

sportsCardHeaderItemHeadingSportStatus: {
    float: "right"
  }

<div
              style={{ flexGrow: "0" }}
              className={classes.sportsCardHeaderItemSecond}
            >
              <div className={classes.sportsCardHeaderItemHeading}>
                2Standard
              </div>

              <div className={classes.sportsCardHeaderItemHeadingValue}>
                jkjkjk
              </div>
            </div>

            <div
              style={{ flexGrow: "0" }}
              className={classes.sportsCardHeaderItemSecond}
            >
              <div className={classes.sportsCardHeaderItemHeading}>
                3Standard
              </div>

              <div className={classes.sportsCardHeaderItemHeadingValue}>
                jkjkjk
              </div>
            </div>

            <div
              style={{ flexGrow: "0" }}
              className={classes.sportsCardHeaderItemSecond}
            >
              <div className={classes.sportsCardHeaderItemHeading}>
                4Standard
              </div>

              <div className={classes.sportsCardHeaderItemHeadingValue}>
                jkjkjk
              </div>
            </div>

            <div
              style={{ flexGrow: "0" }}
              className={classes.sportsCardHeaderItemSecond}
            >
              <div className={classes.sportsCardHeaderItemHeading}>
                5Standard
              </div>

              <div className={classes.sportsCardHeaderItemHeadingValue}>
                jkjkjk
              </div>
            </div>

            <div
              style={{ flexGrow: "0" }}
              className={classes.sportsCardHeaderItemSecond}
            >
              <div className={classes.sportsCardHeaderItemHeading}>
                6Standard
              </div>

              <div className={classes.sportsCardHeaderItemHeadingValue}>
                jkjkjk
              </div>
            </div>

            <div
              style={{ flexGrow: "0" }}
              className={classes.sportsCardHeaderItemSecond}
            >
              <div className={classes.sportsCardHeaderItemHeading}>
                7Standard
              </div>

              <div className={classes.sportsCardHeaderItemHeadingValue}>
                jkjkjk
              </div>
            </div>

            <div
              style={{ flexGrow: "0" }}
              className={classes.sportsCardHeaderItemSecond}
            >
              <div className={classes.sportsCardHeaderItemHeading}>
                8Standard
              </div>

              <div className={classes.sportsCardHeaderItemHeadingValue}>
                jkjkjk
              </div>
            </div>

            <div
              style={{ flexGrow: "0" }}
              className={classes.sportsCardHeaderItemSecond}
            >
              <div className={classes.sportsCardHeaderItemHeading}>
                9Standard
              </div>

              <div className={classes.sportsCardHeaderItemHeadingValue}>
                jkjkjk
              </div>
            </div>

            <div