Comment aligner à droite les éléments div?

351

Le corps de mon document html se compose de 3 éléments, un bouton, un formulaire et un canevas. Je veux que le bouton et le formulaire soient alignés à droite et la toile à gauche. Le problème est que lorsque j'essaie d'aligner les deux premiers éléments, ils ne se suivent plus et sont à côté l'un de l'autre horizontalement ?, voici le code que j'ai jusqu'à présent, je veux que le formulaire suive directement après le bouton à droite sans espace entre les deux.

#cTask {
  background-color: lightgreen;
}

#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  float: right;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  <script type="text/javascript" src="timeline.js"></script>
  <link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>

<body bgcolor="000" TEXT="FFFFFF">
  <div id="button">
    <button onclick="showForm()" type="button" id="cTask">
        Create Task
    </button>
  </div>
  <div id="addEventForm">
    <form>
      <p><label>Customer name: <input></label></p>
      <p><label>Telephone: <input type=tel></label></p>
      <p><label>E-mail address: <input type=email></label></p>
    </form>
  </div>
  <div>
    <canvas id="myBoard" width="1000" height="600">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>
Développer l'extrait

css html MEURSAULT
la source

Réponses:

338

Vous pouvez faire un div qui contient à la fois le formulaire et le bouton, puis faire flotter le div vers la droite en définissant float: right;.

vantrung -cuncon
la source
Je n'ai jamais pensé utiliser de flotteur. J'ai essayé margin-left: auto;mais cela n'a pas fonctionné, ce qui m'a surpris car l'élément que j'essaie d'aligner à droite est relatif.
DFSFOT
462

les flotteurs sont ok, mais problématiques avec ie6 & 7.

je préfère utiliser margin-left:auto; margin-right:0;sur le div intérieur.

pstanton
la source
6
@ShellNinja pourquoi? Je sais que 0c'est valable, mais 0px l'est aussi ... argumentez votre point pour que nous apprenions quelque chose.
pstanton
29
Le fait de laisser l'unité permet au navigateur d'ignorer certains calculs sur le rendu de cette amélioration des performances. Si c'est zéro, pourquoi gaspiller les ressources en calculant la mise en page sur la base d'une unité? Zéro est zéro quelle que soit l'unité ... On pourrait penser que cette logique serait désormais intégrée aux navigateurs. lien
ShellNinja
7
Je ne peux pas être en désaccord mais je doute que cela affecte beaucoup les performances. Éditer.
pstanton
24
Je ne peux pas faire fonctionner cela, le div s'aligne toujours à gauche. Pourriez-vous fournir un violon ou quelques (plus) lignes de html / css?
Griddo
21
Assurez-vous que votre élément adisplay: block;
derek_duncan
202

Anciennes réponses. Une mise à jour: utilisez flexbox, fonctionne à peu près dans tous les navigateurs maintenant.

<div style="display: flex; justify-content: flex-end">
  <div>I'm on the right</div>
</div>
Développer l'extrait

Et vous pouvez devenir encore plus chic, simplement:

<div style="display: flex; justify-content: space-around">
  <div>Left</div>
  <div>Right</div>
</div>
Développer l'extrait

Et plus amateur:

<div style="display: flex; justify-content: space-around">
   <div>Left</div>
   <div>Middle</div>
  <div>Right</div>
</div>
Développer l'extrait

Michael Bushe
la source
4
cela fonctionne, mais lorsque l'écran devient petit au lieu de s'empiler, il devient vraiment étroit
jean d'arme
6
Vous devez ajouter une requête multimédia pour modifier la flex-direction de ligne en colonne au point de rupture que vous définissez. Vous voudrez probablement modifier ou supprimer votre contenu justifié dans cet exemple, sinon les choses s'étireront de haut en bas au lieu de gauche et de droite.
Michael Bushe
Cela a fonctionné pour moi. Les réponses précédentes ne l'ont pas fait. Utilisation de "brillant".
Roger
30

Les autres réponses à cette question ne sont pas aussi bonnes car float:rightpeuvent aller en dehors d'un div parent (débordement: caché pour le parent peut parfois aider) et margin-left: auto, margin-right: 0pour moi ne fonctionnait pas dans les div complexes imbriqués (je n'ai pas cherché pourquoi).

J'ai compris que pour certains éléments text-align: right, cela fonctionne, en supposant que cela fonctionne lorsque l'élément et le parent sont à la fois inlineou inline-block.

Remarque: la text-alignpropriété CSS décrit comment le contenu en ligne comme le texte est aligné dans son élément de bloc parent. text-alignne contrôle pas l'alignement des éléments de bloc lui-même, mais uniquement leur contenu en ligne.

Un exemple:

<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
    <div style="display: block; width: 100%">
        I'm parent
    </div>
    <div style="display: inline-block; text-align: right; width: 100%">
        Caption for parent
    </div>
</div>

Voici un JS Fiddle .

Mladen Adamovic
la source
15

Si vous avez plusieurs divisions que vous souhaitez aligner côte à côte à l'extrémité droite de la division parent, définissez-la text-align: right;sur la division parent.

Mo Bitar
la source
15

Vous pouvez utiliser flexboxavec flex-growpour pousser le dernier élément vers la droite.

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>
jzilg
la source
1
Personnellement, je pense que c'est la bonne réponse pour 2020: P
Mike Kellogg
2

Si vous n'avez pas à prendre en charge IE9 et ci-dessous, vous pouvez utiliser flexbox pour résoudre ce problème: codepen

Il y a aussi quelques bugs avec IE10 et 11 ( support flexbox ), mais ils ne sont pas présents dans cet exemple

Vous pouvez aligner verticalement le <button>et le <form>en les enveloppant dans un conteneur avec flex-direction: column. L'ordre source des éléments sera l'ordre dans lequel ils sont affichés de haut en bas, je les ai donc réorganisés.

Vous pouvez ensuite aligner horizontalement le conteneur de formulaire et de bouton sur la toile en les enveloppant dans un conteneur avec flex-direction: row . Encore une fois, l'ordre source des éléments sera l'ordre dans lequel ils sont affichés de gauche à droite, je les ai donc réorganisés.

En outre, il faudrait que vous supprimez tous positionet des floatrègles de style à partir du code lié à la question.

Voici une version réduite du HTML dans le codepen lié ci-dessus.

<div id="mainContainer">
  <div>
    <canvas></canvas>
  </div>
  <div id="formContainer">
    <div id="addEventForm"> 
      <form></form>
    </div>
    <div id="button">
      <button></button>
    </div>
  </div>
</div>

Et voici le CSS pertinent

#mainContainer {
  display: flex;
  flex-direction: row;
} 

#formContainer {
  display: flex;
  flex-direction: column;
}
Bates550
la source
1

La réponse simple est ici:

<div style="text-align: right;">
    anything:
    <select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
    </select>
</div>
Community Ans
la source
0

Vous pouvez simplement utiliser padding-left: 60% (par exemple) pour aligner votre contenu à droite et envelopper simultanément le contenu dans un conteneur réactif (j'avais besoin de la barre de navigation dans mon cas) pour vous assurer qu'il fonctionne dans tous les exemples.

Leevansha
la source
0

Si vous utilisez le bootstrap, alors:

<div class="pull-right"></div>
anil shrestha
la source
Je pense que tu voulais dire <div class="text-right"></div>.
Alex Barker
1
anil n'a pas tort, la classe "pull-right" donne "float: right;" (testé avec Bootstrap 3.4.1)
Fabian Horlacher
-13

Je sais que c'est un ancien poste, mais ne pourriez-vous pas simplement utiliser <div id=xyz align="right"> à bon .

Vous pouvez simplement remplacer la droite par la gauche, centrer et justifier.

A travaillé sur mon site :)

Dafydd
la source
21
Veuillez ne pas utiliser d'attributs HTML pour formater votre page. C'est pour ça que CSS a été fait. En fait, l' alignattribut est désormais obsolète .
Hanna
4
... et donc la raison d'une question comme celle-ci et la nécessité d'y répondre, car les anciennes méthodes ne fonctionnent plus.
vapcguy
ohohoh, tellement négatif))
Nessi