Wie kann man diese Spanne rechts vom Div ausrichten?

151

Ich habe folgendes HTML:

<div class="title">
    <span>Cumulative performance</span>
    <span>20/02/2011</span>
</div>

mit diesem CSS:

.title
{
    display: block;
    border-top: 4px solid #a7a59b;
    background-color: #f6e9d9;
    height: 22px;
    line-height: 22px;
    padding: 4px 6px;
    font-size: 14px;
    color: #000;
    margin-bottom: 13px;
    clear:both;
}

Wenn Sie dies überprüfen jsFiddle: http://jsfiddle.net/8JwhZ/

Sie können sehen, dass Name und Datum zusammenkleben. Gibt es eine Möglichkeit, das Datum nach rechts auszurichten? Ich habe float: right;das zweite probiert, <span>aber es vermasselt den Stil und schiebt das Datum außerhalb des umschließenden Div

html css DaveDev
quelle
2
Können Sie den HTML-Code ändern?
Phrogz
3
Wenn Sie möchten, dass etwas in Bezug auf ein anderes Objekt schwebt, muss sich der Floater vor dem Nicht-Floater befinden. Das Datum sollte vor dem Titel liegen und rechts schweben.
Josh Kovach

Antworten:

246

Wenn Sie den HTML- Code ändern können: http://jsfiddle.net/8JwhZ/3/

<div class="title">
  <span class="name">Cumulative performance</span>
  <span class="date">20/02/2011</span>
</div>

.title .date { float:right }
.title .name { float:left }
Phrogz
quelle
CSS ist vereinfacht und ordnungsgemäß sauber: Beide sollten hinzugefügt werden. Auch Geige enthalten sehr fragile Lösung: jsfiddle.net/8JwhZ/2090
Risord
9
Oder wenn Sie es inline wollen (ich habe)<span style="float: right">
Mark
51

Das Arbeiten mit Schwimmern ist etwas chaotisch:

Dies wie viele andere "triviale" Layout-Tricks können mit Flexbox durchgeführt werden.

   div.container {
     display: flex;
     justify-content: space-between;
   }

2017 ist dies meiner Meinung nach die bevorzugte Lösung (gegenüber Float), wenn Sie keine älteren Browser unterstützen müssen: https://caniuse.com/#feat=flexbox

Überprüfen Sie, wie unterschiedlich die Float-Nutzung im Vergleich zur Flexbox ist ("kann einige konkurrierende Antworten enthalten"): https://jsfiddle.net/b244s19k/25/ . Wenn Sie immer noch bei float bleiben müssen, empfehle ich natürlich die dritte Version.

Risord
quelle
Das ist das, was ich zu verwenden entschieden haben, halten auch festgelegt im Auge float: left;und float: right;in den Spannweiten enthält Elemente , die Sie in den Weltraum wollen.
Ran Lottem
1
Die Kernbotschaft dieser Antwort lautet: "Float wird als schädlich angesehen" und Sie sollten diese niemals verwenden (ok, sicher, dass es einige seltene Ausnahmen gibt). Können Sie also klarstellen, warum Sie das für eine gute Idee halten?
Risord
1
Ich dachte, dass floates in den inneren Elementen erforderlich ist, weil ich dachte, dass es im Geigenbeispiel für sie definiert ist, aber dafür ist #testDes nicht definiert. Mein Fehler!
Ran Lottem
24

Eine alternative Lösung für Schwimmer ist die Verwendung der absoluten Positionierung:

.title {
  position: relative;
}

.title span:last-child {
  position: absolute;
  right: 6px;   /* must be equal to parent's right padding */
}

Siehe auch die Geige .

Philipp
quelle
5

Sie können dies tun, ohne das HTML zu ändern. http://jsfiddle.net/8JwhZ/1085/

<div class="title">
<span>Cumulative performance</span>
<span>20/02/2011</span>
</div>

.title span:nth-of-type(1) { float:right }
.title span:nth-of-type(2) { float:left }
Kerel
quelle
4

Die Lösung mit Flexbox ohne justify-content: space-between.

<div class="title">
  <span>Cumulative performance</span>
  <span>20/02/2011</span>
</div>

.title {
  display: flex;
}

span:first-of-type {
  flex: 1;
}

Wenn wir flex:1das erste verwenden <span>, nimmt es den gesamten verbleibenden Platz ein und verschiebt das zweite <span>nach rechts. Die Geige mit dieser Lösung: https://jsfiddle.net/2k1vryn7/

Hier https://jsfiddle.net/7wvx2uLp/3/ können Sie den Unterschied zwischen zwei Flexbox-Ansätzen erkennen: Flexbox mit justify-content: space-betweenund Flexbox mit flex:1auf dem ersten <span>.

hydro17
quelle