Question

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

但我不明白here question {{3}}如何与Pinterest画廊对齐？

似乎inline-blocks和column-gap达成了协议。但是怎么样？我们没有更改内联块的默认垂直对齐？

Answer 1

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

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

您还可以使用列计数指定希望内容传播的列数。

我在div中使用数字为你做了一个例子，看看这个排序如何与列宽一起工作：）

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在Pinterest中垂直对齐内联块？

1 个答案: