Элементы блока выравнивания по правому краю в HTML

Я хотел бы выровнять элементы блока в плавающем контейнере.

Предположим следующую разметку.

<div style="float: left;">
  <img style="display: block;" src="...">
  <img style="display: block;" src="...">
</div>

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

Что я пробовал:

div { text-align: right; } - работает в IE8, не работает в Firefox (естественно, изображения являются блоками и не должны подвергаться воздействию text-align)
img { margin: 0 0 0 auto; } - работает в Firefox, не работает в IE8
плавание изображений вправо - не работает, так как я никогда не хочу, чтобы изображения в одной строке. Кроме того, плавающие изображения больше не вытесняют следующий контент.

Что еще я могу попробовать? Я предпочитаю чистое решение CSS, если это вообще возможно.

UPDATE

Здесь сценарий, объясняющий полную разметку: http://jsfiddle.net/Tomalak/yCTHX/3/

Настройка float: right; работает для всех реальных браузеров, для IE8 она расширяет окно изображения в строке сначала по всей ширине и толкает окно с текстом.

Ответы

Ответ 1

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

Ответ 2

Правильный способ выравнивания элемента с CSS состоит в том, чтобы установить выравнивание текста на контейнере и маржу на дочерние элементы.
Ваши попытки ошибочны, поскольку вы устанавливаете margin и text-align на тег img. Ваш css должен выглядеть так:

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

Просто протестирован на ie8, ff и chrome.
http://jsfiddle.net/notme/wfwjf/2/

Ответ 3

используйте clearfix hack, это поможет вам не плавать снизу img рядом с top img. ширина по высоте можно определить по вашему желанию

.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>

Вот демонстрационная скрипта

Ответ 4

Я знаю, что вы не хотите редактировать HTML. но если вы хотите, чтобы изображения были в блоке, почему бы не просто поместить их в один: D!

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/

Ответ 5

Поместите их в выравнивание справа:

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

Затем используйте js для установки ширины div для изображения:

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

CSS

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

Хотя лучше с js, ему не нужно работать

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

Ответ 6

Добавьте overflow: hidden; в родительский div изображений. Он будет обтекать изображения, когда вы их плаваете, и очистите изображения справа с помощью clear: right

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

Ответ 7

Существует два возможных решения с базовым атрибутом HTML: Подход 1:

<p>
<img src="...." align="right">...some text...
</p>

Подход 2: Вы можете использовать макеты на основе столбцов, используя http://www.gridsystemgenerator.com

Col 1 Col 2 текст.. изображение

Ответ 8

попробуйте это

http://jsfiddle.net/rtaUj/4/

CSS

.image1 {
    width: 200px;
    border:1px solid red;
    height:100px;
    margin:10px 0;

}
.image2 {
    width: 100px;
   border:1px solid red;
    height:100px;

}