Ausrichten 2 span-einer Links und der andere rechts innerhalb eines div

Könnte jemand schreiben der CSS-fragment, das zu tun?

<div class="container">
  <span class="left">Left</span><span class="right">Right</span>
</div>

Hier ist die CSS-Datei für .container:

.container {
    position:absolute;
    bottom:0;
    margin: 0 5px 5px 5px;
}

Beachten Sie die position absolut ist, weil es ist "absolute positionated" - element enthalten.

Habe ich bereits versucht float:left/float:right auf die beiden verschachtelten Elementen, aber nichts passiert.

InformationsquelleAutor Max | 2012-12-16

  1. 5

    Legen Sie die Elemente zu blockieren, legen Sie eine Breite und float.

    .left{
  display: block;
  float:left;
  width: 100px;
}

.right{
  display: block;
  float:right;
  width: 100px;
}

    Beispiel: http://jsfiddle.net/LML2e/

    dies ist nicht die Lösung und float bereits bewirkt eine display: block;, das ist auch gut so in diesem Fall.
    Das ist großartig. Ein Hinweis: die Breite kann auch in Prozent, die ist cool.

    InformationsquelleAutor Kevin Bowersox

  2. 2

    float: left und float: right wird perfekt funktionieren, wenn Sie eine (relative oder absolute) Breite für Ihre .container div

    Demo

    .container {
    position:absolute;
    bottom:0;
    margin: 0 5px 5px 5px;
    width: 200px; //either absolute width
    width: 100%;  //or relative width
}

    Seite Hinweis: Wenn Sie die .container zu width: 100% erhalten Sie hässliche scroll-Balken durch die margin. Verwenden Sie einfach die margin im .left und .right Klassen. Sehen hier.

    Ok, ich vergaß zu setzen widht:100%; auf den container. Vielen Dank. Nur une noch etwas: nehmen wir an, gesetzt .Links für die Schriftgröße auf 200%, wie kann ich die bekommen habe .Links und .rechts unten ausgerichtet .container-element?
    Dies ist nicht möglich, mit float. Vielleicht sollten Sie verwenden display: inline-block statt. jsfiddle.net/RBFJ5/7 Andere Möglichkeit wäre, eine Tabelle zu verwenden

    InformationsquelleAutor Horen

  3. 0

    Müssen Sie die Breite festlegen, um die Verwendung float. Wenn Sie möchten, eine Breite von 100% Sie können .container { width: 100%; } oder verbessern Sie Ihre code in etwas wie:

    .container {
    position:absolute;
    bottom:5px;
    left:5px;
    right:5px;
}

    InformationsquelleAutor Wouter J

Schreibe einen Kommentar