将标题对齐到相同的基线，不管以下文本？ [英] align headings to same baseline, regardless following text?
问题描述
有没有办法将不同大小的多个标题的第一行对齐到同一基线？
请参阅
如果您需要的东西实际上与基线对齐你知道它在打印，游戏是更困难。问题是，你将需要推动各种量取决于确切的字体 - 几乎不可能，当每个浏览器可能使用不同的字体。这里有一个尝试可能：
这两种解决方案都有跨浏览器问题。网络只是不提供这种适当的工具。但在任何情况下，你不需要div。你可以对标题本身做所有的调整。你甚至不需要他们在你的例子。为什么这些div在那里？
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:
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!
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:
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?
这篇关于将标题对齐到相同的基线，不管以下文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
