Ausrichten des Containers

Ich habe eine Spanne, die unten und ganz links auf den Inhalt des Containers ausgerichtet sein muss. Spanne Text - Knoten und Container Text - Knoten Schriftgröße kann abweichen.Ausrichten des Containers

Unabhängig davon, welche Spanne sich immer erstrecken sollte, sollte sie immer an ihrem Container Text-Knoten unten und ganz links ausgerichtet sein. Ich habe versucht, float links zum span Knoten. Es richtet sich nach links, aber nicht nach unten. Entfernen float auf die Spannweite, richtet sich am unteren, aber nicht am weitesten links. Entschuldigung, wenn ich dich nicht besser erklärt habe.

Siehe das Bild für weitere Klarstellung angebracht

Auch hier ist der Code, den ich versuchte:

.flexCtn{ 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:flex-end; 
 
    height:50px; 
 
    width:300px; 
 
    border:1px solid #dfdfdf; 
 
    background:#fff; 
 
} 
 
.w100{ 
 
    font-size:30px; 
 
    width:100%; 
 
    text-align:right 
 
} 
 
span{ 
 
    font-size:14px; 
 
    float:left; 
 
    display:inline-block; 
 
}

<div class="flexCtn"> 
 
    <div class="w100"> 
 
     <span>check</span> 
 
     the alignment 
 
    </div> 
 
</div>

P. S Ich will keine Änderung an den DOM. Ich habe einen bestimmten Grund für diese DOM-Struktur, die vage sein wird, wenn ich euch erklären werde. Außerdem soll keine absolute Position für die span gelten. Vielen Dank im Voraus

Quelle

2016-12-29 Santhosh Kumar

Sie haben einen flexbox Container - also warum auch ein flexbox nicht w100 machen und vertikalalign-items: center mit ausrichten - siehe Demo unter:

.flexCtn { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-end; 
 
    height: 50px; 
 
    width: 300px; 
 
    border: 1px solid #dfdfdf; 
 
    background: #fff; 
 
} 
 
.w100 { 
 
    font-size: 30px; 
 
    width: 100%; 
 
    text-align: right; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 
span { 
 
    font-size: 14px; 
 
    float: left; 
 
    display: inline-block; 
 
}

<div class="flexCtn"> 
 
    <div class="w100"> 
 
    <span>check</span> 
 
    the alignment 
 
    </div> 
 
</div>

Quelle

2016-12-29 05:55:50 kukkuz

Dank Geck ... arbeitete –

@SanthoshKumar Zukünftige Benutzer, und sich selbst, immer Vorteil, zu wissen, welche am besten jede Frage gelöst Antwort, und da diese Antwort erschien Ihre Frage zu lösen, Bitte Akeptiere es. – LGSon

@SanthoshKumar können Sie bitte akzeptiert und schließen Sie die Frage, danke! – kukkuz

Ich habe verwendet flex Eigenschaft

https://plnkr.co/edit/flxsEcpSBe8sr2w3wPFc?p=preview

 div{ 
      font-size:14px; 
      display:flex; 
      align-items:flex-end; 
      flex:1; 
     }

Quelle

2016-12-29 05:57:31 Sharmila

Ich habe erwähnt, absolut sollte nicht in meinem Post-Skript verwendet werden –

Sorry, ich habe das nicht bemerkt .. aber ich änderte span zu div :). Sie haben bereits funktionierende Lösung .. gerade versucht es – Sharmila

.flexCtn{ 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:flex-end; 
 
    height:50px; 
 
    width:300px; 
 
    border:1px solid #dfdfdf; 
 
    background:#fff; 
 
} 
 
.w100{ 
 
    font-size:30px; 
 
    width:100%; 
 
    text-align:right 
 
} 
 
span{ 
 
    font-size:14px; 
 
    float:left; 
 
    display:inline-block; 
 
    padding : 16px 0 0 0; /* specify top position */ 
 
}

<div class="flexCtn"> 
 
    <div class="w100"> 
 
     <span>check</span> 
 
     the alignment 
 
    </div> 
 
</div>

Quelle

2016-12-29 06:16:37 YSuraj

Das funktioniert nicht, wenn ich unterschiedliche Schriftgröße habe –

Ausrichten des Containers

Antwort

Verwandte Themen