如何将 div 的内容粘贴到 div 的顶部？答案

【问题标题】：How to stick contents of div to the top of the div?如何将 div 的内容粘贴到 div 的顶部？
【发布时间】：2017-11-29 09:47:13
【问题描述】：

我想要一个paragraph，在button 旁边，在textarea 元素旁边。我已经做到了，但是现在，当我展开 textarea 时，按钮也会向下移动。我想要一个按钮和一个段落，它贴在它所在的div 的顶部，所以它一定不受文本区域高度的影响。

我知道这个问题必须有一个非常简单的解决方案，但我找不到它:(

这是我的代码：

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

【问题讨论】：

试试vertical-align: top; 换成p 和button
我知道这很容易，我只是不知道vertical-align 属性！ :)

标签： html css button textarea vertical-alignment

【解决方案1】：

试试vertical-align:top 换成p 和button

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

【讨论】：

【解决方案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>

【讨论】：