левый и правый плавал элементы с четким извлекая шагом под

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, и вы будете хороши.

Хорошо. Вы можете перемещать все коэффициенты слева и удалять поплавок с эвенов. Таким образом, правые боковые divs (evens) будут складываться, даже если левые боковые divs (коэффициенты) больше и не будет белого пробела.

Это мое решение:

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

английский не мой первый язык, извините, если им просто хаотичный или что-то.