eqal底部邊緣浮動的div

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
你看到的div 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>