所有浮动div之间的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
你看到div 1-4-7在10px之间没有空格。有没有办法在所有div之间获得相等的垂直距离，而不将它们放在不同的列中？

Answer 1

我做了样品。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;