Повторное использование floatLeft и floatRight для выравнивания текста по правому краю

Как я могу выровнять текст по правому краю, как показано ниже. Я хочу, чтобы продукт, цена и год были выровнены по правому краю.

   product       Computer
     price       $1500
      year       2013

В настоящее время HTML-код ниже дает макет, как показано

product     Computer
price       $1500
year        2013   

<div style="clear: both;display: block;">
     <p style="float: left">
         <strong>product</strong>
     </p>
     <p style="float: left">
         <span>Computer</span>
     </p>    
</div>

<div style="clear: both;display: block;">
     <p style="float: left">
         <strong>price</strong>
     </p>
     <p style="float: left">
         <span>$1500</span>
     </p>    
</div>

<div style="clear: both;display: block;">
     <p style="float: left">
         <strong>year</strong>
     </p>
     <p style="float: left">
         <span>2013</span>
     </p>    
</div>

html css css-float right-align
person ove    schedule 01.09.2013    source источник

Ответы (4)


arrow_upward
0
arrow_downward

попробуйте отобразить: встроенный блок, творит чудеса

person kangoroo    schedule 01.09.2013

arrow_upward
0
arrow_downward

Попробуйте выровнять плавающие слева слова с text-align:right;.

person cbr    schedule 01.09.2013

arrow_upward
0
arrow_downward

Дайте тегам <p> некоторую ширину и отступ от вашего последнего дочернего элемента внутри тега <div>. Затем назначьте text-align: right вашему первому дочернему элементу. Это должно выглядеть примерно так: пример jsFiddle.

person abpetkov    schedule 01.09.2013
comment
first-child и last-child не совместимы со всеми браузерами, особенно с IE8. - person ove; 01.09.2013
comment
first-child совместим с IE8. last-child нет, но все же есть простой способ изменить CSS без его использования. - person abpetkov; 04.09.2013

arrow_upward
0
arrow_downward

Я бы решил это, используя элементы встроенного блока вместо плавающих. Чтобы немного придерживаться своей разметки, вы можете сделать:

HTML

<div class="row">
     <span>product</span>
     <span>computer</span>
</div>

<div class="row">
     <span>price</span>
     <span>$1500</span>
</div>

CSS

div.row > span {
    display: inline-block;
    width: 100px;
    text-align: right;
    margin: 0 20px 0 0;
}

div.row > span:last-child {
    width: 200px;
    text-align: left;
}

Демо

Попробуйте перед покупкой

В качестве примечания: вы можете подумать об использовании другого элемента для своего контента:

Абзац обычно представляет собой набор фразового содержимого, который образует блок текста с одним или несколькими предложениями, обсуждающими конкретную тему, как в типографике, но также может использоваться для более общей тематической группировки. Например, адрес — это также абзац, как и часть формы, подписи или строфы в стихотворении.

Если ваши данные на самом деле табличные, вместо этого вы можете использовать элемент <table>. Вы также можете использовать некоторую разметку, как это сделал я, или даже использовать список определений <dl> или несортированный список <ul>.

Изменить

Как просили в комментариях. Вот версия с использованием таблицы:

HTML

<table>
    <tbody>
        <tr>
            <td>Product</td>
            <td>Computer</td>
        </tr>
        <tr>
            <td>Price</td>
            <td>1500 USD</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 350px;
}

table > tbody > tr > td:first-child {
    width: 100px;
    padding: 0 50px 0 0;
    text-align: right;
}

Демо

Попробуйте перед покупкой

person insertusernamehere    schedule 01.09.2013
comment
last-child не совместим со всеми браузерами - person ove; 01.09.2013
comment
@overule Тогда просто используйте вместо этого first-child, демонстрация. - person insertusernamehere; 01.09.2013
comment
такой же результат. Эти css зависят от браузера - person ove; 01.09.2013
comment
@overule Какой браузер вам нужно поддерживать? Даже IE7 поддерживает first-child. Вместо этого вы все равно можете использовать класс. - person insertusernamehere; 01.09.2013
comment
я считаю, что это не совместимо с IE8 - person ove; 01.09.2013
comment
@overule Взгляните на этот вопрос: Поддержка браузера для CSS: первый дочерний элемент и :последний дочерний элемент - person insertusernamehere; 01.09.2013
comment
Можете ли вы обновить пример, используя вместо этого таблицы? Было бы намного лучше - person ove; 01.09.2013
comment
@overule Я обновил ответ примером использования таблицы. - person insertusernamehere; 01.09.2013