使用 CSS 定位元素

Question

哦，那个尴尬的时刻，我觉得我不知道 CSS 是如何工作的...

我正在尝试在 CSS 中布置看板。板包含列，而列又包含任务。从原理上讲，它很简单：

其中板是 div，列是 div，任务是带有一些段落的 div。

我正在尝试将列设置为全高，这就是我遇到问题的地方 — 由于某种原因，包含任务的列一直被推到页面底部（而没有任务的列不't).

这是一个 CodePen link，其中包含此行为的示例：http://codepen.io/anon/pen/jbOBrj。

（和 css 代码，因为 SO 坚持 links to codepan 必须附有代码）：

html, body{
  height: 100%;
}

#app{
  height: 100%;
}

.board{
  background: silver;
  width: 100%;
  height: 100%;
}

.column{
  display: inline-block;
  margin: 0 0.5em;
  background: gray;
  width: 20%;
  height: 100%;
}

.task{
  background: yellow;
  width: 90%;
  margin: auto;
  padding: 0.2em;
  text-align: center;
}

能否请您建议如何更正此问题？最好不使用浮点数。

（如果你也能解释一下为什么会这样，我会很高兴。我对这种行为感到非常困惑。）

Answer 1

阅读 inline-blocks 的对齐方式，然后将 vertical-align:top; 添加到您的 .column class 以解决您的问题

http://codepen.io/anon/pen/XmWgjG

使用 CSS 定位元素

Positioning an element with CSS

css

css-position