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'のベースラインをテキストのベースラインに合わせたいのですが。

いくつかのメモ：

  • ヘッダーは右揃えで、幅は固定されています
  • ヘッダーは本文よりも大きいフォントサイズを使用します
  • 完全に整列させたいのですが、これは、ピクセルの上部を設定してほぼ整列させるだけではないことを意味します。（このページは印刷され、これは間違いなく目立ちます）
4

4 に答える 4

3

テーブルを使ってみて、vertical-align: baseline;

于 2012-05-21T19:50:10.470 に答える
0

ちょっと近いものがあるかもしれません。これが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;
}

それはvertical-align: text-topあなたが望むものかもしれませんが、それはすべてがインラインである必要があります。あなたと組み合わせると、display:inline-blockあなたが必要とするものに近いものを手に入れることができるかもしれません。.rightレイアウトに合わせるには、おそらくクラスの幅とマージンをいじる必要があります。

お役に立てば幸いです。

于 2012-05-22T00:34:26.310 に答える
0

これがテーブルのない別の解決策です：最初に私は<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

テーブルレイアウトを使用する必要はありませんvertical align。同じものを使用するように両方の要素を設定し、要素line-heightの上部を揃えます。テキストをベースライン上に置くことに不安がある場合は、を使用position:relative; and top:FOOpxしてテキストを上下に移動します。

于 2013-05-22T19:26:17.160 に答える