Div浮动，高度可变

Question

我想将div放在彼此旁边，它们具有可变高度。我使用显示内联块来将div彼此相邻浮动，如何删除每个块之间的额外空间？

（如何删除下面突出显示的黄色空格）

以下是我的代码

body {
  font-family: "Tahoma", Geneva, sans-serif;
  font-size: 15px;
}
.block,
.block li {
  display: block;
}
.block {
  width: 960px;
  margin: 10px;
  padding: 10px;
  background: rgba(0, 80, 140, 0.3);
}
.block li {
  display: inline-block;
  vertical-align: top;
  list-style: none;
  background: rgba(255, 0, 0, 0.4);
  width: 290px;
  margin: 0 10px 10px 0;
  padding: 5px;
}
.block li:nth-child(3n) {
  margin: 0 0 10px 0;
  background: rgba(0, 255, 0, 0.6);
}
.block li:nth-child(3n-1) {
  background: rgba(0, 0, 255, 0.5);
}

<ul class="block">
  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content please.
    <br />And some more
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>
</ul>

Answer 1

使用innerHeight()的jQuery hack。希望这会有所帮助。

＆＃13;

＆＃13;

var liElementHeights = [];
$(".block li").map(function(){
  liElementHeights.push($(this).innerHeight());
});
//console.log(liElementHeights);
var maxHeight = Math.max.apply(null, liElementHeights);
//console.log(maxHeight);
$(".block li").map(function(){
  $(this).innerHeight(maxHeight);
});

＆＃13;

body {
  font-family: "Tahoma", Geneva, sans-serif;
  font-size: 15px;
}
.block,
.block li {
  display: block;
}
.block {
  width: 960px;
  margin: 10px;
  padding: 10px;
  background: rgba(0, 80, 140, 0.3);
}
.block li {
  display: inline-block;
  vertical-align: top;
  list-style: none;
  background: rgba(255, 0, 0, 0.4);
  width: 290px;
  margin: 0 10px 10px 0;
  padding: 5px;
}
.block li:nth-child(3n) {
  margin: 0 0 10px 0;
  background: rgba(0, 255, 0, 0.6);
}
.block li:nth-child(3n-1) {
  background: rgba(0, 0, 255, 0.5);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="block">
  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content please.
    <br />And some more
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />
  </li>

  <li>
    Some content here.
    <br />More content.
    <br />Even more content.
    <br />Enough content for now.
    <br />
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;