EQAL unteren Rand zwischen allen schwebte divs

Question

Das Snippet

.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
Sie sehen, dass divs 1-4-7 haben nicht Raum zwischen 10px. Gibt es eine Möglichkeit, die gleiche vertikale Distanz zwischen allen Divs zu erhalten, ohne sie in separate Spalten zu setzen?

Answer 1

Ich machte Proben.

.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>