Javascript CSS删除浮动元素上方的白色间隙

我正在尝试构建此布局：

我用float:left表示左边的盒子，用float:right表示右边的盒子

问题是每个右浮动框的顶部都和前一个左浮动元素对齐

因此，我得到的是：

HTML:
我需要按此顺序保存元素（框1、框2、框7）

方框1（大）Lorem ipsum（…）
方框2（小）
方框3（小）
方框4（大）Lorem ipsum（…）
方框5（小）
方框6（大）Lorem ipsum（…）
方框7（小）

演示：

其他注意事项：

• 在较小的设备上，框应合并在一列中，与在引导中使用col-*-12相同，但保持相同的顺序（box1、box2、…box7）
• 只要IE11、Chrome和Firefox支持，我可以使用Bootstrap、Mashise、Bulma或其他有助于构建网格/布局的库
• 一个只有CSS的解决方案绝对是美妙的
• 我不想使用display:table。给出了原因

到目前为止我所尝试的：

• 使用自举→ 如果不在DOM中移动东西，我无法使它对小屏幕做出响应
• 使用砌体→ 我找不到订购箱子的方法。他们只是把自己安置在最近的地方
• 使用flex→ 我陷入了类似的境地
• 使用CSS网格布局→ IE11并不完全支持它
• 使用CSS列→ 我需要70%| 30%的比例。这是为50%| 50%设计的

如何从布局中删除这些白色间隙？我可以用浮动元素实现这一点吗？如果没有，正确的方法是什么

编辑： 我需要让它反应灵敏。在较小的屏幕上，我需要坚持这种单列布局（正如我在“其他注意事项”一节中提到的）

---

您需要创建两个新的div来对每侧的方框进行分组：

<div class="container">

  <div class="group box left">

  <div class="box box1 green">
  BOX 1 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. Integer luctus dolor quis condimentum mollis.
  </div>

  <div class="box box4 pink">
  BOX 4 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. 
  </div>    

  <div class="box box6 teal">
  BOX 6 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum.
  </div>    

  </div>

  <div class="group box right">

    <div class="box box2 orange">
  BOX 2 (small) 
  </div>

  <div class="box box3 blue">
  BOX 3 (small) 
  </div>

  <div class="box box5 yellow">
  BOX 5 (small)
  </div>

  <div class="box box7 purple">
  BOX 7 (small)
  </div>    

  </div>

</div>

方框1（大）同一种知识是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德这句话的意思是：“我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们。”。
方框4（大）同一种知识是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德这句话的主旨是：不吃甜食，但要吃调味品。
方框6（大）是一位杰出的预言家，他是一位伟大的预言家。他是一位伟大的预言家。他是一位伟大的预言家，他是一位伟大的预言家。他是一位伟大的预言家。
方框2（小）
方框3（小）
方框5（小）
方框7（小）

如果将Flexbox和

float

组合在一起，您可以这样做，在较窄的屏幕上使用Flexbox属性

order

通过首先添加较小的元素，您可以简单地

float

和

clear

它们，它们将在自己的列中向右对齐

当媒体查询开始时，删除

float

，添加

display:flex

和

order

1-7

堆栈片段

。左{
宽度：75%；
}
.对{
浮动：对；
宽度：25%；
清楚：对
}
.green{背景色：#90EE90；}
.blue{背景色：#20B2AA；}
.orange{背景色：#FFA07A；}
.pink{背景色：#FFB6C1；}
.yellow{背景色：#FFD700；}
.teal{背景色：#00CED1；}
.purple{背景色：#9370DB；}
@介质（最大宽度：500px）{
.左，.右{
浮动：无；
宽度：100%；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
}
.container.box1{订单：1}
.container.box2{订单：2}
.container.box3{订单：3}
.container.box4{订单：4}
.container.box5{订单：5}
.container.box6{订单：6}
.container.box7{订单：7}
}

方框2（小）
方框3（小）
方框5（小）
方框7（小）
方框1（大）同一种知识是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德这句话的意思是：“我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们。”。
方框4（大）同一种知识是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德这句话的主旨是：不吃甜食，但要吃调味品。
方框6（大）Lorem ipsum dolor sit amet，供职于发展精英。我们的生活水平不受影响
<div class="container">

  <div class="group box left">

  <div class="box box1 green">
  BOX 1 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. Integer luctus dolor quis condimentum mollis.
  </div>

  <div class="box box4 pink">
  BOX 4 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum. Praesent pretium nisl quis ante accumsan sagittis. Nullam ac tortor quis turpis dictum fringilla ut non arcu. Praesent eget tellus vitae leo malesuada condimentum. 
  </div>    

  <div class="box box6 teal">
  BOX 6 (big) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel eros non odio varius efficitur. Aliquam vel dui iaculis, imperdiet odio ut, posuere nulla. Maecenas rutrum nibh sit amet sem congue ornare. Donec tellus ipsum, pulvinar sed orci in, efficitur pulvinar ipsum.
  </div>    

  </div>

  <div class="group box right">

    <div class="box box2 orange">
  BOX 2 (small) 
  </div>

  <div class="box box3 blue">
  BOX 3 (small) 
  </div>

  <div class="box box5 yellow">
  BOX 5 (small)
  </div>

  <div class="box box7 purple">
  BOX 7 (small)
  </div>    

  </div>

</div>