左右浮动明确移除间隔元件下方

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中拆分evens和赔率，你就会很好。

好的。您可以将所有赔率浮动到左侧，并将浮子从浮子上移除。所以即使左侧divs（赔率）较大并且没有空白区域，右侧div（evens）也会叠加。

这是我的解决方案：

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); 
     } 
    } 
    } 
} 

英语不是我的第一语言，对不起，如果我只是散漫什么的。