html - 如何像 Pinterest 中那样垂直对齐内联 block ？

Question

默认情况下，内联 block 的vertical-align等于baseline。来自 this question我明白什么是底线。

但我不明白怎么办 here从这里question , inline-blocks 是否像 Pinterest 画廊中那样对齐？

看来column-gap 和column-width 达成了协议(protocol)。但如何呢？我们没有改变内联 block 的默认垂直对齐吗？

Answer 1

在示例中，他们使用column-width来指定创建的列的宽度，然后由浏览器决定将创建多少列。然后，它拆分这些列中的元素，并从第一列开始向下排序，然后从上到下到下一列，依此类推。列间隙仅用于在创建的列之间添加空间。

是的，.items 是内联 block 元素，但它们只是堆叠在彼此之上。它们的对齐方式与垂直对齐无关。

您还可以使用 column-count 指定希望内容分布的列数。

我在 div 中使用数字制作了一个示例，以便您了解排序如何与列宽配合使用:)

*,
*:before,
*:after {
  box-sizing: border-box !important;
}
.row {
  -moz-column-width: 18em;
  -webkit-column-width: 18em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
}
.item {
  display: inline-block;
  padding: .25rem;
  width: 100%;
}
.well {
  position: relative;
  display: block;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />



<div class="container">
  <div class="row">
    <div class="item">
      <div class="well">1</div>
    </div>
    <div class="item">
      <div class="well">2</div>
    </div>
    <div class="item">
      <div class="well">3</div>
    </div>
    <div class="item">
      <div class="well">4</div>
    </div>
    <div class="item">
      <div class="well">5</div>
    </div>
    <div class="item">
      <div class="well">6</div>
    </div>
    <div class="item">
      <div class="well">7</div>
    </div>
    <div class="item">
      <div class="well">8</div>
    </div>
    <div class="item">
      <div class="well">9</div>
    </div>
    <div class="item">
      <div class="well">10</div>
    </div>
  </div>
</div>