Как выровнять два элемента вправо, не делая ручных вычислений высоты / запаса?

Question

Эта скрипка демонстрирует проблему.

Я пытаюсь совместить изображение и кнопку справа на двух отдельных строках как единое целое. Я создал оболочку div ("right-stuff") с помощью position: относительный, поэтому я могу использовать position: absolute для своего дочернего элемента, кнопки.

Проблема в том, что я не знаю хорошего способа выровнять кнопку вправо, не нарушая вычисления высоты.

Я дал ему position:absolute и right:0, но это удаляет его из потока и приводит к тому, что контейнер («правильные вещи») не включает его - посмотрите, как красный фон не достигает это, хотя это "должно".

Другая проблема заключается в том, что следующему элементу в потоке после «правильных вещей» потребуется верхний край поля, чтобы быть в правильном положении, или в противном случае я должен либо дать «правильному материалу» ширину, которую я сам вычисляю, или искусственный край (который учитывает высоту кнопки). Здесь слишком много знаний.

Есть ли лучший способ заставить оба элемента действовать как единое целое, то есть "выровненные по правому краю", но не вынимая вещи из потока?

Очевидно, что это не первый раз, когда кто-то задает этот вопрос, но я не нашел здесь ответа, который бы решал эти конкретные проблемы без уродливых хаков (например, ручное добавление поля margin-bottom, равного высоте кнопки).

Редактировать : выравнивание текста - достойное решение (лучше, чем я думал в любом случае). Одно предостережение: предполагается, что кнопка действительно является текстовой и не работает с самим изображением. Это нормально в моем примере, потому что изображение является самой широкой вещью в контейнере - но что, если у меня был другой элемент в контейнере, который был шире, чем изображение? Как бы сохранить изображение выровненным вправо?

Answer 1

Да, поскольку оба эти элемента (img и button) имеют значение inline-block, вы можете просто использовать text-align: right.

Answer 2

проверить отредактированную скрипку на http://jsfiddle.net/HXH5Z/4/

По сути, я только что вернул кнопку обратно в поток, но заключил ее в div, выравнивая содержимое (выравнивание текста) вправо. Этого же можно добиться, просто добавив правило text-align: right к элементу #right-stuff, но я не знаю, хотите ли вы, чтобы изображение было выровнено вправо внутри этого элемента ...

Answer 3

Что не так с выравниванием текста вправо?

<div id="nContainer">
    <div id="nRight-stuff">
        <div id="nRight-img">
            <img src="http://sharecare.files.wordpress.com/2008/04/cute-animals-1.jpg?w=490" />
        </div>
        <button id="nRight-btn">A right aligned button</button>
    </div>
    <br style="clear: both" />
</div>

#nRight-stuff {
    float: right;
    text-align: right;
}

Fiddle