2017-06-26 2 views
2

Je veux avoir un paragraph, à côté d'un button, à côté d'un élément textarea. Je l'ai fait, mais maintenant, quand je développe le textarea, le bouton descend aussi. Je veux avoir un bouton et un paragraphe qui colle au sommet de la div il est, donc il ne doit pas être affecté par la hauteur de la zone de texte.Comment coller le contenu de div au sommet de la div?

Je sais qu'il doit y avoir une solution très simple à ce problème, mais je ne pouvais pas trouver :(

Ceci est mon 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>

+1

Essayez 'vertical-align: top;' 'pour p' et 'button' – XYZ

+0

Je _knew_ c'était facile, je ne connaissais pas la propriété' vertical-align'! :) – Sacha

Répondre

1

Essayez vertical-align:top pour p et 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>

1

Voir les commentaires en réponse .. mettre tous les enfants sur #parent pour aligner vers le haut

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