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

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了一段时间，但现在可以选择flexbox 或 CSS 。grid

Answer 2

您只需在列上设置 33% 的宽度，这将限制它占据 div 整个宽度的 33%。

http://jsfiddle.net/Ge6g7/1/

.cont {
    height:60px;
    background: #ffff88;
}
.cont span {
    display: inline-block;
    height:100%;
    line-height: 100%;
    width: 33%; /* Added Css */
}