使用显示内联块列向下移动

Question

我试图用来display:inline-block建立3列。

它在一开始就可以正常工作，但是当我向第一列添加内容时，它会影响其余的布局，并在较低的层次上呈现其余的列。

我该怎么做才能避免这种情况？

.cont {

  width: 500px;

  height: 200px;

  background: #666666;

}

.col {

  display: inline-block;

  width: 30%;

  background: pink;

}


<div class="cont">

  <div class="col">

    test<br><br><br>

  </div>

  <div class="col">

    col2

  </div>

  <div class="col">

    col3

  </div>

</div>

Answer 1

您应该添加vertical-align: top;CSS声明以使列在顶部垂直对齐：

.cont span {
    display: inline-block;
    vertical-align: top;     /* Vertically align the inline-block elements */
    height:100%;
    line-height: 100%;
    width: 33.33%;           /* Just for Demo */
    outline: 1px dashed red; /* Just for Demo */
}

老实说，我不喜欢inline-block在页面上创建列，因为它们之间有空白。

在float正在使用了一段时间，但现在flex框或CSSgrid可以是一种选择。