alinhar cabeçalhos à mesma linha de base, independentemente do texto a seguir?

Question

Feb 17, 2010, 07:32 PM

alinhar cabeçalhos à mesma linha de base, independentemente do texto a seguir?

existe uma maneira de alinhar a primeira linha de vários títulos de vários tamanhos com a mesma linha de base? Independentemente do texto a seguir, que também deve estar alinhado.

Veja a imagem emhttp://snapplr.com/snap/z1mw por favor

EDIT: re-carregado:

texto alternativo http://img144.imageshack.us/img144/7615/screenshot2010021722h53.png

Parece-me que a única solução é colocar cada cabeçalho e cada texto do corpo em DIV separado e, em seguida, com os cabeçalhos para jogar com o padding top ou margin-top para alinhá-los (por exemplo, H1 teria 36px com margem de 0px, enquanto H3 seria 24px com margem superior de 12px). Algo assim:

<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>

Mas essa não é uma solução muito agradável. Há algo melhor, por favor?

Muito obrigado!