web-dev-qa-db-fra.com

Comment aligner correctement les éléments div?

Le corps de mon document html est constitué de 3 éléments, un bouton, un formulaire et un canevas. Je veux que le bouton et le formulaire soient bien alignés et que la toile reste à gauche. Le problème, c’est que lorsque je tente d’aligner les deux premiers éléments, ils ne se suivent plus mais se joignent horizontalement? 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>

csshtml5
232
MEURSAULT

Vous pouvez créer une div contenant à la fois le formulaire et le bouton, puis la faire flotter à droite en définissant float: right;.

207
vantrung -cuncon

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

je préférerais utiliser margin-left:auto; margin-right:0; sur la div interne.

333
pstanton

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

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

Et vous pouvez devenir encore plus amateur, simplement:

<div style="display: flex; justify-content: space-around">
  <div>Left</div>
  <div>Right</div>
</div>

Et amateur:

<div style="display: flex; justify-content: space-around">
   <div>Left</div>
   <div>Middle</div>
  <div>Right</div>
</div>

89
Michael Bushe

Les autres réponses à cette question ne sont pas très bonnes, car float:right peut sortir d'un div parent (débordement: masqué pour le parent, parfois utile) et margin-left: auto, margin-right: 0 ne fonctionne pas dans les div complexes imbriquées (je n'ai pas cherché à savoir pourquoi). 

J'ai compris que pour certains éléments, text-align: right fonctionnait, en supposant que cela fonctionne lorsque l'élément et le parent sont tous les deux inline ou inline-block.

Remarque: la propriété CSS text-align décrit comment le contenu en ligne, tel que le texte, est aligné dans son élément de bloc parent. text-align ne contrôle pas l'alignement des éléments de bloc, mais seulement 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 .

26
Mladen Adamovic

Voulez-vous dire comme ça? http://jsfiddle.net/6PyrK/1

Vous pouvez ajouter les attributs de float:right et clear:both; au formulaire et au bouton.

17
Joseph Marikle

Si vous souhaitez aligner côte à côte plusieurs divs à l'extrémité droite du div parent, définissez text-align: right; sur le div parent.

7
Mo Bitar

Si vous n'avez pas à supporter IE9 et les versions antérieures, vous pouvez utiliser flexbox pour résoudre ce problème: codepen

Il y a aussi quelques bugs avec IE10 et 11 ( flexbox support ), 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 formulaires et de boutons sur le canevas en les enveloppant dans un conteneur avec flex-direction: row. Encore une fois, l'ordre source des éléments sera celui dans lequel ils seront affichés de gauche à droite. Je les ai donc réorganisés.

De plus, cela nécessiterait que vous supprimiez toutes les règles de style position et float du code lié à la question.

Voici une version allégée du code HTML dans le code 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;
}
2
Bates550

Vous pouvez utiliser flexbox avec flex-grow pour pousser le dernier élément à droite.

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>
0
jzilg

Vous pouvez simplement utiliser padding-left: 60% (par exemple) pour aligner votre contenu sur la droite et simultanément envelopper le contenu dans un conteneur sensible (j’ai besoin de la barre de navigation dans mon cas).

0
Leevansha

Si vous utilisez bootstrap, alors:

<div class="pull-right"></div>
0
anil shrestha