1

我试图通过基线使标题与正文对齐，但这似乎证明非常困难。我一直在玩弄不同的方法，但似乎找不到完美的解决方案。这是我所追求的一个例子：

例子

<h2>XxMmxX</h2>
<p class="right">
    I saw for the first time the earth's shape. I could easily see the shores of continents, islands, great rivers, folds of the terrain, large bodies of water. The horizon is dark blue, smoothly turning to black. . . the feelings which filled me I can express with one word—joy.
</p>

风格：

h2 {
    position: relative;
    font-size: 24px;
    line-height: 40px;
    text-align: right;
    width: 190px;
    top: 30px;
}
.right {
    margin-left: 200px;
    font-size: 14px;
    line-height: 20px;
}

我想让“XxMmxX”的基线与文本的基线对齐。

一些注意事项：

  • 标题右对齐并具有固定宽度
  • 标题使用比正文更大的字体大小
  • 我希望它们完全对齐，这意味着不仅仅是设置一些 px 的顶部并使其几乎对齐。（此页将被打印，这肯定会很明显）
4

4 回答 4

3

尝试使用表格，并使用vertical-align: baseline;

于 2012-05-21T19:50:10.470 回答
0

您不必使用表格布局，也不必使用vertical align. 将两个元素设置为使用相同line-height的元素并对齐元素的顶部。如果您对让文本停留在基线上很挑剔，请使用position:relative; and top:FOOpx上下移动文本。

于 2013-05-22T19:26:17.160 回答
0

这是另一个没有表格的解决方案：首先我使用 a<div>而不是<p>：

<h2 class="left">XxMmxX</h2>

<div class="right">
    I saw for the first time the earth's shape. I could easily see the shores of continents, islands, great rivers, folds of the terrain, large bodies of water. The horizon is dark blue, smoothly turning to black. . . the feelings which filled me I can express with one word—joy.
</div>

我习惯float把. 对齐技巧是通过设置已知的字体大小来完成的，比如to和to 。这样你需要向下移动一个已知的量，在这种情况下。向下移动完成（您也可以使用顶部边距）。这里是：<div><h2>1em<div>1.5em<h2><div>0.5emposition/top

.left {
  float: left;
  font-size: 1.5em;

}

.right {
  font-size: 1em;
  float: left;
  width: 20em;  
  position: relative;
  top: 0.5em;
  margin-left: 10px;
}
于 2012-05-21T21:24:46.460 回答
0

I may have something that's kinda close. Here's the jsfiddle.

HTML:

<span class="textblock">
  <h2>XxMmxXx</h2>

  <span class="right">
    I saw for the first time the earth's shape. I could easily see the shores of continents, islands, great rivers, folds of the terrain, large bodies of water. The horizon is dark blue, smoothly turning to black. . . the feelings which filled me I can express with one word—joy.
  </span>

</span>

CSS:

.textblock {
  float: left;
  line-height: 1em;
}

h2 {
  font-size: 1.5em;
  display: inline-block;
}

.right {
  display: inline-block;
  font-size: 1em;
  width: 15em;
  vertical-align: text-top;
  margin-left: 30px;
}

It seems that vertical-align: text-top may be what you want, but it requires everything to be inline. Combined with display:inline-block you may be able to get something close to what you need. You'll probably have to fiddle with the width and margin of the .right class to adjust to your layout.

Hope that helps.

于 2012-05-22T00:34:26.310 回答