Comment aligner deux éléments sur la même ligne sans modifier le code HTML ?

Question

Comment aligner deux éléments sur la même ligne sans modifier le code HTML ?

Demandé el 30 de Janvier, 2012: Quand la question a-t-elle été
599573 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai deux éléments sur la même ligne, flottant à gauche et flottant à droite.

<style type="text/css">
    #element1 {float:left;}
    #element2 {float:right;}
</style>

<div id="element1">
    element 1 markup
</div>
<div id="element2">
    element 2 markup
</div>

J'ai besoin que l'élément 2 s'aligne à côté de l'élément 1 avec environ 10 pixels d'espacement entre les deux. Le problème est que la largeur de l'élément 2 peut changer en fonction du contenu et du navigateur (taille de la police, etc.), de sorte qu'il n'est pas toujours parfaitement aligné sur l'élément 1 (je ne peux pas simplement appliquer une marge droite et le déplacer).

Je ne peux pas non plus modifier le balisage.

Existe-t-il une méthode uniforme pour les aligner ? J'ai essayé la marge droite avec un pourcentage, j'ai essayé une marge négative sur l'élément 1 pour rapprocher l'élément 2 (mais je n'ai pas réussi à le faire).

Demandé el 30 de Janvier, 2012 par user1074378

Answer 1

3 Réponses

Answer 2

3voto

Code Junkie Points 525

Lorsque j'utilise des éléments flottants de ce type, je dois généralement m'assurer que l'élément conteneur sera toujours suffisamment grand pour que les largeurs des deux éléments flottants, plus la marge souhaitée, puissent toutes tenir à l'intérieur. La façon la plus simple de le faire est évidemment de donner aux deux éléments intérieurs des largeurs fixes qui s'adapteront correctement à l'intérieur de l'élément extérieur, comme ceci :

#container {width: 960px;}
#element1  {float:left; width:745px; margin-right:15px;}
#element2  {float:right; width:200px;}

Si vous ne pouvez pas le faire parce qu'il s'agit d'une mise en page à largeur variable, une autre option consiste à faire en sorte que chaque série de dimensions soit exprimée en pourcentages :

#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:20%;}

La situation devient délicate lorsque vous avez besoin de quelque chose comme ceci :

#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:200px;}

Dans des cas comme celui-ci, je trouve que la meilleure option est parfois de ne pas utiliser les flottants et d'utiliser le positionnement relatif/absolu pour obtenir le même effet que celui-ci :

#container {position:relative;} /* So IE won't bork the absolute positioning of #element2 */
#element1 {margin-right:215px;}
#element2 {display: block; position:absolute; top:0; right:0; height:100%; width:200px;}

Bien qu'il ne s'agisse pas d'une solution flottante, elle permet d'obtenir des colonnes côte à côte de même hauteur, dont l'une peut rester fluide tandis que l'autre a une largeur statique.

Répondu el 30 de Janvier, 2012 par Code Junkie (525 Points )

Answer 3

3voto

Hashim Points 600

La réponse moderne est sans aucun doute display:flex Bien que j'aie constaté que space-around tend généralement à me donner de meilleurs résultats que space-between :

.container {
  display: flex;
  justify-content: space-around
}

<!DOCTYPE html>
<html>
  <body>
    <div class='container'>
      <h1>hi</h1>
      <h1>bye</h1>
    </div>
  </body>
</html>

Répondu el 13 de Juin, 2022 par Hashim (600 Points )

Answer 4

2voto

Abhishek Kumar Points 11

C'est ce que j'ai utilisé pour un cas d'utilisation similaire au vôtre.

<style type="text/css">
#element1 {display:inline-block; width:45%; padding:10px}
#element2 {display:inline-block; width:45%; padding:10px}
</style>

<div id="element1">
 element 1 markup
</div>
<div id="element2">
 element 2 markup
</div>

Ajustez la largeur et le rembourrage en fonction de vos besoins. Note - Ne dépassez pas la "largeur" de plus de 100% au total (ele1_width+ ele2_width) pour ajouter le "padding", gardez-le inférieur à 100%.

Répondu el 20 de Mars, 2019 par Abhishek Kumar (11 Points )

Comment aligner deux éléments sur la même ligne sans modifier le code HTML ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment aligner deux éléments sur la même ligne sans modifier le code HTML ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: