выровнять заголовки по одной базовой линии, независимо от следующего текста? - PullRequest
Новая
       24

выровнять заголовки по одной базовой линии, независимо от следующего текста?

8 голосов
/ 17 февраля 2010

есть ли способ выровнять первую строку нескольких заголовков разного размера по одной базовой линии? Также независимо от текста, который следует, который также должен быть выровнен.

См. Изображение на http://snapplr.com/snap/z1mw пожалуйста

РЕДАКТИРОВАТЬ: перезагружено:

альтернативный текст http://img144.imageshack.us/img144/7615/screenshot2010021722h53.png

Мне кажется, единственное решение состоит в том, чтобы поместить каждый заголовок и каждый основной текст в отдельный DIV, а затем с заголовками, чтобы поиграть с padding-top или margin-top для их выравнивания (например, H1 будет 36px с полем 0px, в то время как H3 будет 24px с верхним полем 12px). Примерно так: 

<html>
<head>
    <style type="text/css" media="all">
        div {
            width: 240px;
            float: left;
        }

        h1 {
            font-size: 36px;
            margin: 0;
            padding: 0;
        }

        h3 {
            font-size: 24px;
            margin: 0;
            padding: 10px 0 0 0; /*for some reason I must use 10px instead of 12px to align. Why??*/
        }
    </style>
</head>
<body>
    <div>
        <h1>H1 heading</h1>
    </div>
    <div>
        <h3>H3 heading</h3>
    </div>
    <div>
        <h3>H3 heading that is somewhat longer and spans multiple lines</h3>
    </div>
    <div style="clear:both;"></div>
    <div>
        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
    </div>
    <div>
        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
    </div>
    <div>
        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
    </div>
</body>

Но это не очень хорошее решение. Есть что-нибудь лучше, пожалуйста?

Большое спасибо!

Ответы [ 2 ]

4 голосов
/ 03 марта 2010

Веб обрабатывает базовые линии иначе, чем вы привыкли в печати. Браузеры будут выравнивать ваш текст по центру высоты строки, а не по низу. Это означает, что текст, выровненный по сетке, вертикально центрирован относительно друг друга, а не расположен на одной базовой линии.

Если вы согласны с этим, вы все равно можете получить от него сильную сетку. Вы просто должны быть точными с вашим комбинированным использованием высоты строки, отступов, границ и полей. Это займет немного математики, но вполне возможно. Подробнее здесь:

http://24ways.org/2006/compose-to-a-vertical-rhythm/

Если вам нужны вещи, выровненные по базовой линии, как вы это знаете в печати, игра намного сложнее. Проблема заключается в том, что вам нужно вводить различные значения в зависимости от точного шрифта - вряд ли это возможно, когда в каждом браузере используется другой шрифт. Вот одна попытка сделать это возможным:

http://baselinecss.com/

При любом решении возникают кросс-браузерные проблемы. Интернет пока не предлагает подходящих инструментов для этого. Но ни в коем случае вам не нужны дивы. Вы можете сделать все эти корректировки в самих заголовках. Вы даже не нуждаетесь в них в вашем примере. Почему там дивы?

0 голосов
/ 24 февраля 2010

Просто быстрая мысль (как в «У меня была эта идея, это могло бы сработать, но я ее не проверял»): как насчет использования line-height? Вы можете использовать одинаковую высоту строки для всех заголовков, тем самым обеспечивая равномерную базовую линию для всех строк.

С уважением Джеспер Хауге

...