8

さまざまなサイズの複数の見出しの最初の行を同じベースラインに揃える方法はありますか? また、それに続くテキストにも関係なく、これも整列する必要があります。

http://snapplr.com/snap/z1mwで写真を参照してください。

編集：再アップロード：

代替テキスト http://img144.imageshack.us/img144/7615/screenshot2010021722h53.png

唯一の解決策は、各見出しと各本文テキストを別々の DIV に配置し、見出しを padding-top または margin-top で並べて配置することです (たとえば、H1 は 0px のマージンで 36px になりますが、H3 は24 ピクセル、上余白 12 ピクセル）。このようなもの：

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

しかし、これはあまり良い解決策ではありません。もっと良いものはありますか？

どうもありがとうございました！

4

2 に答える 2

4

Web では、印刷物とは異なる方法でベースラインが処理されます。ブラウザーは、テキストを下部ではなく、行の高さの中央に揃えます。これは、Web グリッドに配置されたテキストが、同じベースライン上に置かれるのではなく、相互に垂直方向に中央に配置されることを意味します。

それでよければ、強力なグリッドを得ることができます。line-height、padding、border、margin を組み合わせて正確に使用する必要があります。多少の計算が必要ですが、完全に可能です。詳細はこちら：

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

印刷物で知っているように、実際にベースラインに合わせる必要がある場合、ゲームははるかに難しくなります。問題は、正確なフォントに応じてさまざまな量をプッシュする必要があることです。各ブラウザーが異なるフォントを使用している可能性がある場合はほとんど不可能です。これを可能にするための 1 つの試みを次に示します。

http://baselinecss.com/

どちらのソリューションでも、クロスブラウザーの問題があります。Web は、このための適切なツールをまだ提供していません。しかし、div が必要になることは決してありません。見出し自体ですべての調整を行うことができます。あなたの例ではそれらを必要としません。なぜそこにdivがあるのですか？

于 2010-03-03T01:04:23.593 に答える
-1

簡単に考えてみましょう (「このアイデアは思いつきましたが、うまくいくかもしれませんが、テストしませんでした」のように): line-height を使用するのはどうですか? すべての見出しに同じ行の高さを使用して、すべての行で均一なベースラインを確保できます。

よろしくジェスパー・ハウジ

于 2010-02-23T23:16:32.663 に答える