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

Posted 2023-03-05

【中文标题】如何将 div 的内容粘贴到 div 的顶部？

【英文标题】：How to stick contents of div to the top of the 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 属性！ :)

【参考方案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>