左右浮动元素，下方有清晰的删除间距

Question

所以我有以下代码：

body {
  counter-reset: section;
}

.evens-and-odds {
  div {
    display: inline-block;
    height: 80px;
    width: calc(50% - 10px);
    margin: 5px;
    padding: 10px 0;
    text-align: center;
    font-size: 30px;
    color: #FFF;
    &:nth-of-type(odd) {
      float: left;
      clear: left;
      background-color: deeppink;
      &:before {
        counter-increment: section;
        content: "Odd: " counter(section);
      }
    }
    &:nth-of-type(even) {
      float: right;
      background-color: lime;
      &:before {
        counter-increment: section;
        content: "Even: " counter(section);
      }
    }
    &:nth-of-type(3) {
     height: 200px 
    }
    &:nth-of-type(5) {
      height: 400px;
    }
    &:nth-of-type(6) {
      height: 300px;
    }
  }
}

下面的完整演示：

http://codepen.io/crashy/pen/QyBvyG

您会注意到，在较大的元素下方，另一侧（左侧或右侧）有空白。我本质上希望元素向上流动，想法是每列都应该被隔离，但我不能使用包装 div 来实现这个只有浮动（或其他一些 CSS 魔法）。

更喜欢无 JavaScript 的解决方案。

Answer 1

如果您想在 CSS 中执行此操作，这有点复杂。我建议您在 HTML 中执行此操作，只需将偶数和赔率分成两个 div 即可。

好的。您可以将所有赔率浮动到左侧，并从偶数中删除浮动。因此，即使左侧 div（奇数）更大并且不会有空白，右侧的 div（偶数）也会堆积起来。

这是我的解决方案：

body {
  counter-reset: section;
}

.evens-and-odds {
  div {
    display: table;
    height: 80px;
    width: calc(50% - 10px);
    margin: 5px;
    padding: 10px 0;
    text-align: center;
    font-size: 30px;
    color: #FFF;
    &:nth-of-type(odd) {
      display: table-cell;
      float: left;
      clear: left;
      background-color: deeppink;
      &:before {
        counter-increment: section;
        content: "Odd: " counter(section);
      }
    }
    &:nth-of-type(even) {
      display: table-cell;
      float: right;
      clear: right;
      background-color: lime;
      &:before {
        counter-increment: section;
        content: "Even: " counter(section);
      }
    }
  }
}

英语不是我的第一语言，如果我只是漫无目的，对不起。