Wie richte ich div-Elemente richtig aus?

351

Der Hauptteil meines HTML-Dokuments besteht aus 3 Elementen, einer Schaltfläche, einem Formular und einer Zeichenfläche. Ich möchte, dass die Schaltfläche und das Formular rechtsbündig sind und die Leinwand linksbündig bleibt. Das Problem ist, wenn ich versuche, die ersten beiden Elemente auszurichten, sie nicht mehr aufeinander folgen und stattdessen horizontal nebeneinander liegen. Hier ist der Code, den ich bisher habe. Ich möchte, dass das Formular direkt nach der Schaltfläche rechts folgt ohne Platz dazwischen.

#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>
Erweitern Sie das Snippet

css html MEURSAULT
quelle

Antworten:

337

Sie können ein Div erstellen, das sowohl das Formular als auch die Schaltfläche enthält, und dann das Div durch Festlegen nach rechts schweben lassen float: right;.

vantrung -cuncon
quelle
Ich hätte nie gedacht, dass ich float verwenden würde. Ich habe es versucht, margin-left: auto;aber das hat nicht funktioniert, was mich überrascht hat, weil das Element, das ich nach rechts ausrichten möchte, relativ ist.
DFSFOT
461

Floats sind in Ordnung, aber problematisch mit IE6 & 7.

Ich würde es vorziehen, margin-left:auto; margin-right:0;auf der inneren Div zu verwenden.

pstanton
quelle
6
@ ShellNinja warum? Ich weiß, dass 0es gültig ist, aber 0px auch ... argumentieren Sie Ihren Standpunkt, damit wir etwas lernen.
Pstanton
29
Wenn Sie das Gerät weglassen, kann der Browser bestimmte Berechnungen überspringen, um die Leistung zu verbessern. Wenn es Null ist, warum sollten Sie die Ressourcen verschwenden, die das Layout basierend auf einer Einheit berechnen? Null ist Null, unabhängig von der Einheit ... Man würde denken, dass diese Logik inzwischen in Browser integriert ist. Link
ShellNinja
7
Ich kann nicht widersprechen, aber ich bezweifle, dass es die Leistung stark beeinflusst. bearbeiten.
Pstanton
24
Ich kann das nicht zum Laufen bringen, das Div ist immer noch links ausgerichtet. Könnten Sie eine Geige oder einige (mehr) Zeilen von HTML / CSS bereitstellen?
Griddo
21
display: block;
Stellen
202

Alte Antworten. Ein Update: Verwenden Sie Flexbox, funktioniert jetzt so ziemlich in allen Browsern.

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

Und Sie können einfach noch schicker werden:

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

Und schicker:

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

Michael Bushe
quelle
4
es funktioniert, aber wenn der Bildschirm klein wird, anstatt zu stapeln, werden sie nur sehr schmal
Jean d'arme
6
Sie müssen eine Medienabfrage hinzufügen, um die Biegerichtung an der von Ihnen definierten Sollbruchstelle von Zeile zu Spalte zu ändern. In diesem Beispiel möchten Sie wahrscheinlich Ihren Begründungsinhalt ändern oder entfernen, da sich sonst die Dinge nach oben und unten anstatt nach links und rechts erstrecken.
Michael Bushe
Das hat bei mir funktioniert. Vorherige Antworten nicht. Mit "glänzend".
Roger
30

Andere Antworten auf diese Frage sind nicht so gut, da float:rightsie außerhalb eines übergeordneten margin-left: auto, margin-right: 0Divs liegen können ( Überlauf: Versteckt für Eltern kann manchmal helfen) und für mich nicht in komplexen verschachtelten Divs gearbeitet haben (ich habe nicht untersucht, warum).

Ich habe herausgefunden, dass dies für bestimmte Elemente text-align: rightfunktioniert, vorausgesetzt, dies funktioniert, wenn das Element und das übergeordnete Element beide inlineoder sind inline-block.

Hinweis: Die text-alignCSS-Eigenschaft beschreibt, wie Inline-Inhalte wie Text in ihrem übergeordneten Blockelement ausgerichtet werden. text-alignsteuert nicht die Ausrichtung der Blockelemente selbst, sondern nur deren Inline-Inhalt.

Ein Beispiel:

<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>

Hier ist eine JS-Geige .

Mladen Adamovic
quelle
17

Meinst du so? http://jsfiddle.net/6PyrK/1

Sie können die Attribute von float:rightund clear:both;zum Formular und zur Schaltfläche hinzufügen

Joseph Marikle
quelle
15

Wenn Sie mehrere Divs haben, die am rechten Ende des übergeordneten Div nebeneinander ausgerichtet werden sollen, setzen Sie sie text-align: right;auf das übergeordnete Div.

Mo Bitar
quelle
14

Sie können verwendet werden flexboxmit flex-growdem letzten Element nach rechts zu schieben.

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>
jzilg
quelle
1
Ich persönlich halte dies für die richtige Antwort für 2020: P
Mike Kellogg
2

Wenn Sie IE9 und niedriger nicht unterstützen müssen, können Sie dies mit flexbox lösen: codepen

Es gibt auch einige Fehler mit IE10 und 11 ( Flexbox-Unterstützung ), die in diesem Beispiel jedoch nicht vorhanden sind

Sie können das <button>und das vertikal ausrichten, <form>indem Sie sie in einen Behälter mit einwickeln flex-direction: column. Die Quellreihenfolge der Elemente ist die Reihenfolge, in der sie von oben nach unten angezeigt werden, sodass ich sie neu angeordnet habe.

Sie können dann den Formular- und Schaltflächencontainer horizontal an der Leinwand ausrichten, indem Sie sie in einen Container mit einwickeln flex-direction: row. Wieder ist die Quellreihenfolge der Elemente die Reihenfolge, in der sie von links nach rechts angezeigt werden, sodass ich sie neu angeordnet habe.

Dies würde auch erfordern, dass Sie alle positionund floatStilregeln aus dem in der Frage verknüpften Code entfernen .

Hier ist eine abgespeckte Version des HTML-Codes im oben verlinkten Codepen.

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

Und hier ist das relevante CSS

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

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

Einfache Antwort ist hier:

<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
quelle
0

Sie können einfach padding-left: 60% (zum Beispiel) verwenden, um Ihren Inhalt nach rechts auszurichten und gleichzeitig den Inhalt in einen reaktionsfähigen Container zu verpacken (in meinem Fall benötigte ich eine Navigationsleiste), um sicherzustellen, dass er in allen Beispielen funktioniert.

Leevansha
quelle
0

Wenn Sie Bootstrap verwenden, dann:

<div class="pull-right"></div>
Anil Shrestha
quelle
Ich denke du meintest <div class="text-right"></div>.
Alex Barker
1
anil ist nicht falsch, Klasse "pull-right" führt zu "float: right;" (getestet mit Bootstrap 3.4.1)
Fabian Horlacher
-13

Ich weiß, dass dies ein alter Beitrag ist, aber Sie können ihn nicht einfach verwenden <div id=xyz align="right"> richtig verwenden.

Sie können einfach rechts durch links ersetzen, zentrieren und ausrichten.

Arbeitete auf meiner Seite :)

Dafydd
quelle
21
Bitte verwenden Sie keine HTML-Attribute, um Ihre Seite zu formatieren. Dafür wurde CSS gemacht. Tatsächlich ist das alignAttribut jetzt veraltet .
Hanna
4
... und damit der Grund für eine solche Frage und die Notwendigkeit, sie zu beantworten, da alte Methoden nicht mehr funktionieren.
Vapcguy
ohohoh, so viel negativ))
Nessi