GD Star Rating
loading...

Чуваки, а вот такая задачка.
Два многострочных блока нужно выровнять таким образом, чтобы первые строки были выравнены по baseline.
Картинку с желаемым результатом прилагаю. Есть мысли, как это сделать с помощью css?
http://jsbin.com/umagob/1/edit

размер 400x258, 86.05 kb

Tagged with →  

8 Responses to строки по baseline

  1. Nidblack:

    у обоих блоков margin-top:-0.78em; padding-top:0;
    где число 0.78еm подбирается для каждого шрифта индивидуально,
    поэтому рекомендуется и шрифтец лучше подгрузить внешний, чтобы
    не зависисть от установленного в системе

  2. Nidblack:

    css в jsbin
    @import url(http://fonts.googleapis.com/css?family=P
    body {
    padding-top:32px;
    }
    div {
    display: inline-block;
    width: 50%;
    vertical-align: top;

    font-family:PT Serif;
    margin-top:-1.05em;
    }.div1 {
    font-size: 30px;
    background: #ebacca;
    text-align:right;
    }.div2 {
    font-size: 10px;
    background: #abacca;
    }

  3. Nidblack:

    парсеееер
    …googleapis.com/css?family=PT+Serif );

  4. CidRU:

    Можно ещё дать пизды дизайнеру. В назидание.

  5. EbuApp:

    Блин, это было бы одно из самых ценных знаний по вёрстке.

  6. EbuApp:

    0.78 – это уровень baseline в шрифте, верно?

  7. LoiAdm:

    Пока, все что я смог придумать, это такой вариант:
    http://jsbin.com/umagob/4/edit

    К сожалению, использование position:absolute сильно ограничивает возможности применения этого решения, т.к. вырывает блоки из потока.

  8. LoiAdm:

    Еще немного подумав, я смог найти решение.
    Держите, вдруг кому надо:

    http://jsbin.com/umagob/5/edit

Добавить комментарий