所有浮动divs之间的等级底部边缘

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
您会发现DIVS 1-4-7在10px之间没有空间。是否有一种方法可以在所有Divs之间获得相等的垂直距离，而无需将它们放在单独的列中？

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>