如何将div内容固定在div顶部？

Question

我想在一个

元素中放置一个段落，一个按钮和一个文本框。我已经完成了这个布局，但是当我扩展文本框的高度时，按钮也会向下移动。我希望按钮和段落粘在

元素的顶部，不受文本框高度的影响。 我知道这个问题肯定有一个非常简单的解决方案，但我找不到 :(

This is my code:

#textarea {
  height: 50px;
  width: 100px;
  margin-left: 20px;
}

#p {
  display: inline;
  margin-right: 20px;
}

<div id="parent">
  <p id="p">Random Text</p>
  <button id="button">Button</button>
  <textarea id="textarea">
    Random
    Text
  </textarea>
</div>

- Sacha

---

尝试为 p 和 button 使用 vertical-align: top;。 - XYZ

我知道这很容易，只是我不知道vertical-align属性！ :) - Sacha

Answer 1

尝试使用“vertical-align:top”来对

和进行垂直对齐。

#textarea {
  height: 50px;
  width: 100px;
  margin-left: 20px;
}

#p {
  display: inline;
  margin-right: 20px;
}
p,button{
  vertical-align:top;
}

<div id="parent">
  <p id="p">Random Text</p>
  <button id="button">Button</button>
  <textarea id="textarea">
    Random
    Text
  </textarea>
</div>

- XYZ

Answer 2

请参考答案中的评论。将#parent下的所有子元素设置为顶部对齐。

#textarea {
  height: 50px;
  width: 100px;
  margin-left: 20px;
}

#p {
  display: inline;
  margin-right: 20px;
}

/* i added this */
#parent > * {
  vertical-align:  top;
  }

<div id="parent">
  <p id="p">Random Text</p>
  <button id="button">Button</button>
  <textarea id="textarea">
    Random
    Text
  </textarea>
</div>

- ashish singh