eqal нижняя граница между всем плавала дивы

Question

сниппеты

.card { 
 
    float: left; 
 
    background: red; 
 
    width: 45%; 
 
    margin-bottom: 10px; 
 
    margin-right: 10px; 
 
} 
 
.card:nth-child(even) { 
 
    background: lightgreen 
 
}

<div class='card' style='height:50px;'>1</div> 
 
<div class='card' style='height:20px;'>2</div> 
 
<div class='card' style='height:30px;'>3</div> 
 
<div class='card' style='height:20px;'>4</div> 
 
<div class='card' style='height:250x;'>5</div> 
 
<div class='card' style='height:35px;'>6</div> 
 
<div class='card' style='height:50px;'>7</div> 
 
<div style='clear:both'></div>

jsfiddle
Вы видите, что дивы 1-4-7 не имеют пространства между 10px. Есть ли способ получить равное вертикальное расстояние между всеми div, не помещая их в отдельные столбцы?

Answer 1

Я сделал образцы.

.card { 
 
    float: left; 
 
    background: red; 
 
    width: 45%; 
 
    margin-bottom: 10px; 
 
    margin-left: 10px; 
 
} 
 
/* 
 
this was not necessary... 
 
.card:first-child { 
 
    margin-left: 0px; 
 
} 
 
*/ 
 
.card:nth-child(odd):not(:nth-child(1)) { 
 
    float: right; 
 
} 
 
.card:nth-child(even) { 
 
    background: lightgreen; 
 
} 
 

 
/* layout control */ 
 
.layout_control .card:nth-child(odd):not(:nth-child(1)) { 
 
    margin-right: 6.5%; 
 
}

resolve only vertical margin 
 
<div> 
 
    <div class='card' style='height:50px;'>1</div> 
 
    <div class='card' style='height:20px;'>2</div> 
 
    <div class='card' style='height:30px;'>3</div> 
 
    <div class='card' style='height:20px;'>4</div> 
 
    <div class='card' style='height:250x;'>5</div> 
 
    <div class='card' style='height:35px;'>6</div> 
 
    <div class='card' style='height:50px;'>7</div> 
 
    <div style='clear:both'></div> 
 
<div> 
 

 
adjust layout "margin-right: 6.5%"(need modifying value) 
 
<div class="layout_control"> 
 
    <div class='card' style='height:50px;'>1</div> 
 
    <div class='card' style='height:20px;'>2</div> 
 
    <div class='card' style='height:30px;'>3</div> 
 
    <div class='card' style='height:20px;'>4</div> 
 
    <div class='card' style='height:250x;'>5</div> 
 
    <div class='card' style='height:35px;'>6</div> 
 
    <div class='card' style='height:50px;'>7</div> 
 
    <div style='clear:both'></div> 
 
<div> 
 

 
NOT RESOLVED PATTERN 
 
<div class="layout_control"> 
 
    <div class='card' style='height:50px;'>1</div> 
 
    <div class='card' style='height:80px;'>2</div> 
 
    <div class='card' style='height:30px;'>3</div> 
 
    <div class='card' style='height:20px;'>4</div> 
 
    <div class='card' style='height:250x;'>5</div> 
 
    <div class='card' style='height:35px;'>6</div> 
 
    <div class='card' style='height:50px;'>7</div> 
 
    <div style='clear:both'></div> 
 
<div>