выровнять заголовки к той же базовой линии, независимо после текста?
существует ли способ выровнять первую строку нескольких заголовков различного размера к той же базовой линии? Также независимо к тексту, который следует, который должен быть выровненный также.
См. изображение по http://snapplr.com/snap/z1mw
Править: повторно загруженный:
сопроводительный текст http://img144.imageshack.us/img144/7615/screenshot2010021722h53.png
Это кажется мне, единственное решение состоит в том, чтобы поместить каждый заголовок и каждый основной текст в отдельный DIV и затем с заголовками для проигрывания с padding-top или граничной вершиной для выравнивания их (например, H1 составил бы 36 пкс с 0px полем, в то время как H3 составит 24 пкс с верхним полем на 12 пкс). Что-то вроде этого:
H1 heading
H3 heading
H3 heading that is somewhat longer and spans multiple lines
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.
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.
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.
Но это не очень хорошее решение. Есть ли что-то лучше?
Большое спасибо!
2 ответа
Небольшая мысль (например, «У меня была эта идея, она может сработать, но я ее не тестировал»): Как насчет использования line- высота? Вы можете использовать одинаковую высоту строки для всех заголовков, тем самым обеспечивая единообразную базовую линию для всех строк.
С уважением, Джеспер Хауге
Сеть обрабатывает базовые линии иначе, чем вы привыкли в печати. Браузеры выравнивают ваш текст по центру высоты строки, а не по низу. Это означает, что текст, выровненный по веб-сетке, центрируется по вертикали относительно друг друга, а не находится на одной базовой линии.
Если вас это устраивает, вы все равно можете получить прочную сетку. Вам просто нужно быть точным с комбинированным использованием высоты строки, отступов, границ и полей. Это требует некоторой математики, но это вполне возможно. Подробнее здесь:
http: // 24ways.org / 2006 / compose-to-a-vertical -hythm /
Если вам нужно, чтобы что-то действительно соответствовало исходному уровню, как вы его знаете в печати, игра будет намного сложнее. Проблема в том, что вам нужно будет нажимать разные суммы в зависимости от конкретного шрифта - это вряд ли возможно, когда каждый браузер может использовать другой шрифт. Вот одна попытка сделать это возможным:
При любом решении возникают проблемы с кроссбраузерностью. Просто в сети пока нет подходящих инструментов для этого. Но ни в коем случае не нужны div. Вы можете сделать все эти настройки в самих заголовках. Они вам даже не нужны в вашем примере. Почему там div?