Richten Sie Blockelemente in HTML rechtsbündig aus

Ich möchte Blockelemente in einem schwebenden Container rechtsbündig ausrichten.

Nehmen Sie das folgende Markup an.

<div style="float: left;">
  <img style="display: block;" src="https://stackoverflow.com/questions/17614801/...">
  <img style="display: block;" src="https://stackoverflow.com/questions/17614801/...">
</div>

   current                 wanted
+-----------+          +-----------+
|+-------+  |          |  +-------+|
||       |  |          |  |       ||
||       |  |          |  |       ||
|+-------+  |   --->   |  +-------+|
|+----+     |          |     +----+|
||    |     |          |     |    ||
|+----+     |          |     +----+|
+-----------+          +-----------+

Was ich versucht habe:

• div { text-align: right; } – funktioniert in IE8, schlägt in Firefox fehl (natürlich sind die Bilder Blöcke und sollten nicht von betroffen sein text-align)
• img { margin: 0 0 0 auto; } – funktioniert in Firefox, schlägt in IE8 fehl
• Die Bilder nach rechts schweben lassen – funktioniert nicht, da ich die Bilder niemals in derselben Zeile haben möchte. Außerdem drücken schwebende Bilder den folgenden Inhalt nicht mehr nach unten.

Was kann ich noch versuchen? Ich bevorzuge eine reine CSS-Lösung, wenn das überhaupt möglich ist.

AKTUALISIEREN

Hier ist eine Geige, die das vollständige Markup erklärt: http://jsfiddle.net/Tomalak/yCTHX/3/

Einstellung float: right; funktioniert für alle echten Browser, für IE8 erweitert es die Bildbox in der Zeile zuerst über die gesamte Breite und schiebt die Box mit dem Text nach unten.

div > img { float:right; clear:right; }

Der richtige Weg, ein Element mit CSS auszurichten, besteht darin, text-align für den Container und margin für die untergeordneten Elemente festzulegen.
Ihre Versuche sind falsch, da Sie den Rand und die Textausrichtung für das img-Tag festlegen. Ihr CSS sollte wie folgt aussehen:

div {
float:right;
text-align: right;
}
img {
margin: 0 0 0 auto;
}  

Gerade getestet auf ie8, ff und chrome.
http://jsfiddle.net/notme/wfwjf/2/

Verwenden Sie den Clearfix-Hack. Dies hilft Ihnen, das untere Bild nicht neben dem oberen Bild zu schweben. Höhe Breite kann nach Belieben definiert werden

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}
.main_div {
    width: 100%;
    height: auto;
    float: left;
}
.big_img {
    float: right;
    width: 100px;
    height: 100px;
}
.small_img {
    float: right;
    width: 100px;
    height: 100px;
}

HTML

<div class="main_div">
    <img src="" class="big_img">
    <div class="clearfix"></div>
     <img src="" class="small_img">

     </div>

Hier ist der Demo Geige

Hinzufügen overflow: hidden; zum übergeordneten div der Bilder. Es umschließt die Bilder, wenn Sie sie schweben lassen, und löscht die Bilder von rechts mit clear: right

http://jsfiddle.net/zBnqQ/15/

Setzen Sie sie in ein rechts ausgerichtetes div:

<div style="float: right;">
  <div align='right' class="content-container">
    <img class="image1" style="display: block;" src="https://stackoverflow.com/questions/17614801/..." />
    <img class="image2" style="display: block;" src="https://stackoverflow.com/questions/17614801/..." />
  </div> 
</div>

Verwenden Sie dann js, um die Breite des div auf das Bild festzulegen:

$('.container').width($('.image1').width());

CSS:

.image1 {
    width: 50px;
}
.image2 {
    width: 30px;
}

Obwohl es mit js besser ist, ist es nicht notwendig, dass es funktioniert

Geige: http://jsfiddle.net/GuTZ3/2/

Es gibt zwei mögliche Lösungen, eine mit grundlegendem HTML-Attribut: Ansatz 1:

<p>
<img src="https://stackoverflow.com/questions/17614801/...." align="right">...some text...
</p>

Ansatz 2: Sie können spaltenbasierte Layouts verwenden http://www.gridsystemgenerator.com

Spalte 1 Spalte 2 Text.. Bild

Ich weiß, dass Sie den HTML-Code nicht bearbeiten möchten.

HTML

    <p>This is crap station train to the mainstream...</p>        

    <div class="sth">
    <p><img src="https://www.gravatar.com/avatar/0ada184c98bf9073d15b2dc815be0170?s=32&d=identicon&r=PG" alt="jesus was not" /></p>
    <p><img src="http://unicornify.appspot.com/avatar/9d699fb41cafd14479fbd1ae1c89c669?s=128" alt="mum asked me to" /></p>
    </div>

    <p>This is crap station train to the mainstream...</p>

CSS

.sth{display:block; text-align:right;}
.sth img{ 
border: 1px solid black;
}

DEMO: http://jsfiddle.net/goodfriend/zBnqQ/39/