it-swarm.com.de

Wie kann ich div-Elemente richtig ausrichten?

Der Hauptteil meines HTML-Dokuments besteht aus 3 Elementen, einer Schaltfläche, einem Formular und einer Leinwand. Ich möchte, dass die Schaltfläche und das Formular rechts ausgerichtet sind und die Leinwand links ausgerichtet bleibt. Das Problem ist, wenn ich versuche, die ersten beiden Elemente auszurichten, sie folgen nicht mehr aufeinander und sind stattdessen horizontal nebeneinander angeordnet. Hier ist der Code, den ich bisher habe. Ich möchte, dass das Formular direkt nach der Schaltfläche rechts folgt ohne raum 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>

232
MEURSAULT

Sie können ein div erstellen, das sowohl das Formular als auch die Schaltfläche enthält, und dann das div nach rechts verschieben, indem Sie float: right; setzen.

207

schwimmer sind ok, aber mit ie6 & 7 problematisch.

ich würde es vorziehen, margin-left:auto; margin-right:0; für das innere div zu verwenden.

333
pstanton

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

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

Und Sie können noch schicker werden:

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

Und schicker:

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

89
Michael Bushe

Andere Antworten auf diese Frage sind nicht so gut, da float:right außerhalb eines übergeordneten div gehen kann (overflow: ausgeblendet für Eltern, das manchmal helfen kann) und margin-left: auto, margin-right: 0 für mich nicht in komplexen verschachtelten divs funktionierte (ich habe nicht untersucht, warum). 

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

Hinweis: Die CSS-Eigenschaft text-align beschreibt, wie Inline-Inhalte wie Text in ihrem übergeordneten Blockelement ausgerichtet werden. text-align steuert nicht die Ausrichtung von Blockelementen 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 Fiddle .

26
Mladen Adamovic

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

Sie können die Attribute von float:right und clear:both; dem Formular und der Schaltfläche hinzufügen

17
Joseph Marikle

Wenn Sie mehrere Divs nebeneinander am rechten Ende des übergeordneten Divs ausrichten möchten, setzen Sie text-align: right; für das übergeordnete Div.

7
Mo Bitar

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

Es gibt auch ein paar Fehler mit IE10 und 11 ( flexbox support ), die in diesem Beispiel jedoch nicht vorhanden sind

Sie können den <button> und den <form> vertikal ausrichten, indem Sie sie mit flex-direction: column in einen Container einschließen. Die Quellreihenfolge der Elemente ist die Reihenfolge, in der sie von oben nach unten angezeigt werden. Daher habe ich sie neu angeordnet.

Sie können dann den Formular- und Schaltflächencontainer horizontal mit der Zeichenfläche ausrichten, indem Sie sie mit flex-direction: row in einen Container einbetten. Wiederum ist die Reihenfolge der Elemente in der Quellreihenfolge von links nach rechts, also habe ich sie neu angeordnet.

Dies erfordert auch, dass Sie alle position- und float-Stilregeln 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 entsprechende CSS

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

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

Sie können flexbox mit flex-grow verwenden, um das letzte Element nach rechts zu verschieben.

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

Sie können einfach padding-left verwenden: 60% (zum Beispiel), um Ihren Inhalt nach rechts auszurichten und gleichzeitig den Inhalt in einen reaktiven Container zu verpacken (in meinem Fall war die Navbar erforderlich).

0
Leevansha

Wenn Sie Bootstrap verwenden, dann:

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