IP Girl
  1. IP Girl
  3. Aligner les éléments côte à côte
Intereting Posts
Impossible de modifier les permissions exécutables sur l’application Formatage de NSDate en styles spécifiques pour l’année, le mois, le jour et l’heure, les minutes et les secondes Comment télécharger javadoc pour lire hors ligne? Pourquoi sun.misc.Unsafe existe-t-il et comment peut-il être utilisé dans le monde réel? Le démarrage de Eclipse est bloqué, “SDK Android: résolution des marqueurs d’erreur” Comment puis-je supprimer une application Facebook que j’ai développée? Existe-t-il une version de $ getJSON qui n’utilise pas de rappel? L’application a appelé une interface qui a été organisée pour un thread différent – Windows Store App Valeur par défaut invalide pour le champ d’horodatage ‘create_date’ Spécifiez le mot de passe sudo pour Ansible Comment forcer VS 2010 à ignorer les «builds» de projets qui n’ont pas changé? Chemin d’access à MSBuild Big O, comment calculez-vous / approximez-vous cela? Pourquoi mon tableau C # perd-il des informations de signe de type lorsqu’il est converti en object? Quel est le moyen le plus simple d’obtenir du XML en retrait avec des sauts de ligne à partir de XmlDocument?

Aligner les éléments côte à côte

Je sais que c’est une question assez simple, mais je ne peux pas la comprendre pour la vie de moi. J’ai deux liens auxquels j’ai appliqué une image d’arrière-plan. Voici à quoi il ressemble actuellement (excuses pour l’ombre, juste un croquis d’un bouton):

entrer la description de l'image ici

Cependant, je veux que ces deux boutons soient côte à côte. Je ne peux pas vraiment comprendre ce qui doit être fait avec l’alignement.

Voici le HTML

Voici le CSS 

 #buyButton { background: url("assets/buy.png") 0 0 no-repeat; display:block; height:80px; width:232px; text-indent:-9999px; } #buyButton:hover{ width: 232px; height: 80px; background-position: -232px 0; } #buyButton:active { width: 232px; height: 80px; background-position: -464px 0; } #galleryButton { background: url("images/galleryButton.png") 0 0 no-repeat; display:block; height:80px; width:230px; text-indent:-9999px; } #galleryButton:hover{ width: 230px; height: 80px; background-position: -230px 0; } #galleryButton:active { width: 230px; height: 80px; background-position: -460px 0; }

Appliquer le float:left; à vos deux divs devrait les faire se tenir côte à côte.

Attention au float: left …

… Il y a plusieurs façons d’aligner les éléments côte à côte.

Vous trouverez ci-dessous les moyens les plus courants de réaliser deux éléments côte à côte…

Démo: Afficher / éditer tous les exemples ci-dessous sur Codepen

Styles de base pour tous les exemples ci-dessous…

Quelques styles de base pour parent éléments parent et child dans ces exemples: 

 .parent { background: mediumpurple; padding: 1rem; } .child { border: 1px solid indigo; padding: 1rem; }

float: à gauche

En utilisant la solution float , j’ai un effet involontaire sur d’autres éléments. (Indice: vous devrez peut-être utiliser un correctif .)

html 

 
 
A
 
B

css 

 .float-left-child { float: left; }

affichage: inline-block

html 

 
 
A
 
B

css 

 .inline-block-child { display: inline-block; }

Remarque : l’espace entre ces deux éléments enfants peut être supprimé en supprimant l’espace entre les balises div:

display: inline-block (pas d'espace)

html 

 
 
A
B

css 

 .inline-block-child { display: inline-block; }

affichage: flex

html 

 
 
A
 
B

css 

 .flex-parent { display: flex; } .flex-child { flex: 1; }

affichage: inline-flex

html 

 
 
A
 
B

css 

 .inline-flex-parent { display: inline-flex; }

restr simple