CSS ausrichten Spannweite von div nach links unten ausgerichtet nach rechts

Ich versuche, ein span nach links einem div, auszurichten, die nach rechts ausgerichtet ist (float: right), aber span erscheint immer mit kollidieren divCSS ausrichten Spannweite von div nach links unten ausgerichtet nach rechts

* { 
 
    font-family: Lucida Sans Unicode, Lucida Grande, Verdana, Arial; 
 
} 
 
.mw { 
 
    display: inline-block; 
 
    float: right; 
 
    position: relative; 
 
} 
 
.msg { 
 
    float: right; 
 
    background-color: #D80000; 
 
    color: white; 
 
    padding: 0.66em; 
 
    border-radius: 1em; 
 
} 
 
.uns { 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div style="width: 480px; background: yellow; padding: 1em"> 
 
    <div class="mw"> 
 
    <span class="uns">0</span> 
 
    <div class="msg">Some content</div> 
 
    <br style="clear: both"> 
 
    </div> 
 
    <br style="clear: both"> 
 
</div>

Dies ist, was ich

erhalten möchten

EDIT: Mit negativen Links ist keine Lösung, Inhalt von span kann variieren, so bei größerer Zahl wird es wieder vermasseln und kollidieren!

Quelle

2016-05-22 jakubinf

Sie können transform: translateX(-100%) verwenden und span nach links gleich der Breite verschieben. -20px Ihrer Klasse:

* { 
 
    font-family: Lucida Sans Unicode, Lucida Grande, Verdana, Arial; 
 
} 
 
.mw { 
 
    display: inline-block; 
 
    float: right; 
 
    position: relative; 
 
} 
 
.msg { 
 
    float: right; 
 
    background-color: #D80000; 
 
    color: white; 
 
    padding: 0.66em; 
 
    border-radius: 1em; 
 
} 
 
.uns { 
 
    position: absolute; 
 
    bottom: 0; 
 
    transform: translateX(-100%); 
 
}

<div style="width: 480px; background: yellow; padding: 1em"> 
 
    <div class="mw"> 
 
    <span class="uns">0</span> 
 
    <div class="msg">Some content</div> 
 
    <br style="clear: both"> 
 
    </div> 
 
    <br style="clear: both"> 
 
</div>

Quelle

2016-05-22 18:48:52

Das ist nicht, wenn der Inhalt von größer Wert wie 10000, es Schrauben wieder – jakubinf

@jakubinf i meine Antwort aktualisiert hilft. –

Es wird immer nach links ausgerichtet sein, wie Sie hier sehen können https://jsfiddle.net/Lg0wyt9u/886/ –

Gerade links hinzuzufügen.

.uns { 
     position: absolute; 
     bottom: 0; 
     left : -20px; 
    }

Werfen Sie einen Blick auf diese Fidlle. https://jsfiddle.net/y6a77fLp/

Quelle

2016-05-22 18:49:34 Don

Nein, wenn der Inhalt der Spanne wie "100000" ist es wieder vermasselt – jakubinf

Wenn es keinen besonderen Grund gibt, position: absolute zu verwenden, können Sie dies verwenden.

.uns { 
    position: relative; 
    float: left; 
    padding-right: 10px; 
    margin-top: 20px; 
}

FIDDLE DEMO HERE

Quelle

2016-05-22 18:54:18

hinzufügen "margin-left: -15px;" in .uns Klasse Stile.

Quelle

2016-05-22 18:55:14

können Sie erreichen, dass flexbox verwenden, und dieser clear s und

Vermeiden Sie Inline-Styles s float loszuwerden.

* { 
 
    font-family: Lucida Sans Unicode, Lucida Grande, Verdana, Arial; 
 
} 
 
.wrap { 
 
    width: 480px; 
 
    background: yellow; 
 
    padding: 1em 
 
} 
 
.mw { 
 
    position: relative; 
 
    display: flex; 
 
    justify-content: flex-end 
 
} 
 
.msg { 
 
    background-color: #D80000; 
 
    color: white; 
 
    padding: 0.66em; 
 
    border-radius: 1em; 
 
} 
 
span { 
 
    display: inline-block; 
 
    align-self: flex-end 
 
}

<div class="wrap"> 
 
    <div class="mw"> 
 
    <span class="uns">100000</span> 
 
    <div class="msg">Some content</div> 
 
    </div> 
 
</div>

Quelle

2016-05-22 18:57:00 dippas

würde ich vorschlagen, Flexbox zu verwenden:

.mw {  
    display: flex; 
    align-items: flex-end; // Align to the bottom 
    // rest of the code 
}

Hier ein demo

Quelle

2016-05-22 18:58:44

hat gerade beantwortet, dass;) – dippas

?? zu spät zu antworten, aber was ist mit vertical-align, text-align + inline-block um einige float zu starten, da es nur über Phrasierung Inhalt ist?

* { 
 
    font-family: Lucida Sans Unicode, Lucida Grande, Verdana, Arial; 
 
} 
 
.mw { 
 
    display: inline-block; 
 
    float: right; 
 
    position: relative; 
 
    text-align: right; 
 
} 
 
.msg { 
 
    background-color: #D80000; 
 
    color: white; 
 
    padding: 0.66em; 
 
    border-radius: 1em; 
 
    display: inline-block; 
 
} 
 
.uns { 
 
    vertical-align: -1em; 
 
    display: inline-block; 
 
} 
 
[style] {overflow:hidden;/* clear in 'n outsider floats */}

<div style="width: 480px; background: yellow; padding: 1em"> 
 
    <div class="mw"> 
 
    <span class="uns">0</span> 
 
    <div class="msg">Some content</div> 
 
    </div> 
 
</div> 
 
<hr/> 
 
<div style="width: 480px; background: yellow; padding: 1em"> 
 
    <div class="mw"> 
 
    <span class="uns">10 000 000 00</span> 
 
    <div class="msg">Some content</div> 
 
    </div> 
 
</div> 
 
<hr/> 
 
<div style="width: 480px; background: yellow; padding: 1em"> 
 
    <div class="mw"> 
 
    <span class="uns">10 000<br/>+ it can wrap too</span> 
 
    <div class="msg">Some content</div> 
 
    </div> 
 
</div>

Quelle

2016-05-22 19:22:00

CSS ausrichten Spannweite von div nach links unten ausgerichtet nach rechts

Antwort

Verwandte Themen