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

Question

我正在尝试构建此布局：

我使用 float：left 表示左侧的框， float：right 表示右侧的框。

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

因此我得到的就是：

HTML
我需要按顺序保存元素（box1，box2，... box7）

<div class="container">
  <div class="box box1 left green">
    BOX 1 (big) Lorem ipsum (...)
  </div>
  <div class="box box2 right orange">
    BOX 2 (small) 
  </div>
  <div class="box box3 right blue">
    BOX 3 (small) 
  </div>
  <div class="box box4 left pink">
    BOX 4 (big) Lorem ipsum (...)
  </div>
  <div class="box box5 right yellow">
    BOX 5 (small)
  </div>
  <div class="box box6 left teal">
    BOX 6 (big) Lorem ipsum (...)
  </div>
  <div class="box box7 right purple">
    BOX 7 (small)
  </div>
</div>

DEMO： https://codepen.io/constagorgan/pen/vjLJzG

其他注意事项：

• 在较小的设备上，这些盒子应合并在一个列中，与在Bootstrap中使用col - * - 12相同，但保持相同的顺序（box1，box2，... box7）
• 我可以使用Bootstrap，Masonry，Bulma或其他帮助构建网格/布局的库，只要IE11，Chrome和Firefox支持
• 只有CSS的解决方案绝对棒极了。
• 我不想使用 display：table 。给出here的原因。

到目前为止我尝试了什么：

• 使用 Bootstrap →我无法在不移动DOM内部的情况下对小屏幕做出响应。
• 使用 Masonry →我找不到订购盒子的方法。他们只是将自己定位在最近的地方。
• 使用 flex →我遇到了类似情况。
• 使用 CSS网格布局→IE11不完全支持。
• 使用 CSS列→我需要70％| 30％的比例。这是为50％| 50％设计的。

如何从布局中删除这些白色间隙？我可以通过浮动元素实现这一目标吗？如果不是，那么正确的做法是什么？

修改 我需要让它响应。在较小的屏幕上，我需要坚持这种单列布局（正如我在“其他考虑因素”部分中提到的那样。

Answer 1

如果您将Flexbox与float结合使用，则可以这样做，在较窄的屏幕上使用Flexbox属性order。

首先添加较小的元素，您只需float和clear，它们就会在自己的列中对齐。

媒体查询启动后，请删除float，然后添加display: flex和order 1-7。

Updated codepen

Stack snippet

＆＃13;

＆＃13;

.left {
  width: 75%;
}
.right {
  float: right;
  width: 25%;
  clear: right
}

.green { background-color: #90EE90; }
.blue { background-color: #20B2AA; }
.orange { background-color: #FFA07A; }
.pink { background-color: #FFB6C1; }
.yellow { background-color: #FFD700; }
.teal { background-color: #00CED1; }
.purple { background-color: #9370DB; }

@media (max-width: 500px) {
  .left, .right {
    float: none;
    width: 100%;
  }
  .container {
    display: flex;
    flex-direction: column;
  }

  .container .box1 { order: 1 }
  .container .box2 { order: 2 }
  .container .box3 { order: 3 }
  .container .box4 { order: 4 }
  .container .box5 { order: 5 }
  .container .box6 { order: 6 }
  .container .box7 { order: 7 }
}

＆＃13;

<div class="container">
  
  <div class="box box2 right orange">
  BOX 2 (small) 
  </div>
  
  <div class="box box3 right blue">
  BOX 3 (small) 
  </div>

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

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

  <div class="box box1 left 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 left 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 left 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>

＆＃13;

＆＃13;

＆＃13;

如果您无法更改标记，则需要使用脚本，您可以在resize事件或window.matchMedia事件中进行操作。

Stack snippet

＆＃13;

＆＃13;

document.addEventListener("DOMContentLoaded", function(event) {

  var container = document.querySelector('.container');
  var items = document.querySelectorAll('.container .box');

  var reorderitems = function(matched) {
    if (matched) {
      container.appendChild(items[0]);
      container.appendChild(items[3]);
      container.appendChild(items[5]);
    } else {
      container.insertBefore(items[2], items[3]);
      container.insertBefore(items[1], items[2]);
      container.insertBefore(items[4], items[5]);
      container.appendChild(items[6]);
    }
  }
  reorderitems(window.outerWidth > 500);

  window.matchMedia("(min-width: 501px)").addListener(function(e) {
    if (e.matches) {
      reorderitems(true);
    } else {
      reorderitems(false);
    }
  });
});

＆＃13;

.left {
  width: 75%;
}

.right {
  float: right;
  width: 25%;
  clear: right
}

.green {
  background-color: #90EE90;
}

.blue {
  background-color: #20B2AA;
}

.orange {
  background-color: #FFA07A;
}

.pink {
  background-color: #FFB6C1;
}

.yellow {
  background-color: #FFD700;
}

.teal {
  background-color: #00CED1;
}

.purple {
  background-color: #9370DB;
}

@media (max-width: 500px) {
  .left,
  .right {
    float: none;
    width: 100%;
  }
}

＆＃13;

<div class="container">

  <div class="box box1 left 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 box2 right orange">
    BOX 2 (small)
  </div>

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

  <div class="box box4 left 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 box5 right yellow">
    BOX 5 (small)
  </div>

  <div class="box box6 left 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 class="box box7 right purple">
    BOX 7 (small)
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要创建两个新的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>