align headings to same baseline, regardless following text?

问题

is there a way to align first line of multiple headings of various size to the same baseline? Also regardless to the text that follows, which should be aligned as well.

~~See picture at http://snapplr.com/snap/z1mw please~~

EDIT: re-uploaded:

alt text http://img144.imageshack.us/img144/7615/screenshot2010021722h53.png

It seems to me the only solution is to put each heading and each body text into separate DIV and then with headings to play with padding-top or margin-top to align them (e.g. H1 would be 36px with 0px margin, while H3 would be 24px with 12px top margin). Something like this:

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

But this is not very nice solution. Is there something better, please?

Thank you very much!

回答1:

The web handles baselines differently than you are used to in print. Browsers will align your text to the center of the line-height, rather than the bottom. This means text aligned to the web grid are vertically centered in relation to each other rather than sitting on the same baseline.

If you are OK with that, you can still get a strong grid from it. You just have to be exact with your combined use of line-height, padding, borders and margins. It takes some math, but is entirely possible. More here:

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

If you need things actually aligned to a baseline as you know it in print, the game is much more difficult. The problem is that you will need to push things various amounts depending on the exact font - hardly possible when each browser may be using a different font. Here is one attempt to make that possible:

http://baselinecss.com/

With either solution there are cross-browser problems. The web just doesn't offer the proper tools for this yet. But in no case should you need the divs. You can do all that adjustment on the headings themselves. You don't even need them in your example. Why are the divs there?

回答2:

Just a quick thought (as in "I had this idea, that might work, but I didn't test it"): How about using line-height? You could use the same line-height for all headlines, thereby ensuring a uniform baseline on all lines.

Regards Jesper Hauge

来源：https://stackoverflow.com/questions/2283383/align-headings-to-same-baseline-regardless-following-text

标签

html

css

typography

vertical-rhythm