如何像Pinterest中那样垂直对齐内联块？

Oleksandr Papchenko 发表于 Dev

奥列克桑德·帕普琴科

默认情况下，内联块vertical-align等于baseline。从这个问题中我了解什么是基线。

但我不明白怎么在这里从这个问题，inline-blocks像在Pinterest的画廊一致？

似乎column-gap并column-width做处理。但是如何？我们没有更改内联块的默认垂直对齐吗？

博扬·彼得科夫斯基（Bojan Petkovski）

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

是的.items是内联块元素，但它们只是堆叠在一起。它们的对齐方式与垂直对齐方式无关。

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

我举了一个在div中使用数字的示例，以供您了解如何使用column-width进行排序：）

*,
*: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>