如何垂直对齐 Pinterest 中的内联块？答案

【问题标题】：How to vertically align inline-blocks like in Pinterest?如何垂直对齐 Pinterest 中的内联块？
【发布时间】：2014-12-17 22:30:48
【问题描述】：

默认情况下，内联块的vertical-align 等于baseline。从this question 我了解什么是基线。

但我不明白 here 和 question 中的 inline-blocks 是如何像在 Pinterest 画廊中一样对齐的？

似乎column-gap 和column-width 达成了交易。但是怎么做？我们没有更改内联块的默认垂直对齐方式？

【问题讨论】：

您的问题到底是什么？他们如何制作砖石布局？您想制作砖石布局并堆叠吗？
这些不是内联块元素。它们是具有砖石布局的块级元素，与垂直对齐无关。要实现这一点，您要么必须依赖 CSS3 columns，要么选择基于 JS 的解决方案，例如 Masonry 或 Isotope。
例如 - jsfiddle.net/victor_007/wy212uj5/2
Flexbox 也可能是一个解决方案：jsfiddle.net/0cazLz2z/1
今天在上面的三个cmets中学到了足够多的东西。谢谢大家:)

标签： html css

【解决方案1】：

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

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

您还可以使用 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>

【讨论】：