J'essaie de faire le bâton de conteneur bleu au sommet. Comment puis-je gérer cela?
html: css: http://jsfiddle.net/xswa4/ ne fonctionne pas .. .
4 Réponses :
Vous devez utiliser vertical-align: haut; sur l'élément .a lui-même, pas le parent .Container :
Cela a fonctionné bien! Merci! Juste une autre question: pourquoi la boîte verte progresse-t-elle lorsque j'applique l'alignement vertical sur le bleu?
@ Maximilian009 Je teste à Chrome 32 sur Windows 7, mais je ne vois pas ce problème sur la démonstration de violon.
Je n'ai aucune question. Je ne comprends pas pourquoi la boîte bleue monte lorsque j'applique une alignement vertical à la boîte verte. Ne serait-il logique que la boîte bleue monte lorsque j'applique le style sur la boîte bleue et le vert se déplace lorsque je l'applique au vert?
@ MAXIMILIAN009 En fait, dans ce cas, le bleu est toujours aligné verticalement dans son de base . Le point est que la boîte la plus grande (le vert) s'étire le parent et affecte l'alignement visuel de l'autre inline (-Block) éléments.
Votre FIDDLE: http://jsfiddle.net/xswa4/3/ vertical-align doit être sur le conteneur bleu, pas le conteneur parent.
Meilleur moyen de le faire.
.container{position:relative;}
.a {position:absolute;top:0;}
Align vertical est utilisé pour les tables
... et des éléments en ligne ou en ligne :). Pourquoi criez-vous?
Je suis surpris que personne n'a mentionné le positionnement absolu car en utilisant un positionnement absolu, les éléments seraient supprimés du flux normal du document et que le conteneur n'aurait aucune idée des éléments positionnés absolus pour ajuster sa hauteur. En outre, l'OMI modifiant la logique entière peut causer des problèmes pour l'OP. Sincèrement.
Réponse à la question originale:
Lorsque vous spécifiez Réponse à votre commentaire Question:
si le look comment vertical-align: haut Le haut de l'élément est aligné sur le haut de l'élément le plus élevé sur la ligne . Dans votre cas, la div frères et sœurs a et b est sur la ligne dans le conteneur parent div . Donc, l'endroit logique pour donner l'alignement vertical est au niveau de la frère div. niveau.
Je ne comprends pas pourquoi la boîte bleue se déplace lorsque j'applique une application verticale-alignée vers la boîte verte.
vertical-align: TOP est appliqué sur l'élément le plus haut de la ligne, puis le frère qui dans votre cas est div un serait aligner sur le plus haut .
Si vous souhaitez explorer davantage, jetez un coup d'œil au exemple jsfiddle .
a , b , c , d et e sont aligné lorsque je défini le vertical-align: haut de la propriété sur le C div qui est le plus grand. Dans ce cas, dans les frères et sœurs divs a, b, d et e , d est le plus haut de sorte qu'il soit aligné sur l'élément le plus hauté, c'est-à-dire C C Mais A , B et E sont alignés sur la base horizontale de d qui est le prochain plus haut.