0

ブループリントを使用して非常に単純なページ レイアウトのプロトタイプを作成しました...しかし、絶対配置と相対配置、および垂直方向の配置に関する多くのオンライン チュートリアルを読んだ後、思うように動作させることができません。 .

これが私のhtmlです：

<div class="container" id="header">
  <div class="span-4" id="logo">
    <img src="logo.png" width="150" height="194" />
  </div>
  <div class="span-20 last" id="title">
    <h1 class="big">TITLE</h1>
  </div>
</div>

ドキュメントには blueprint screen.css ファイルが含まれています。

TITLE をロゴの下部、つまり実際には #header の下部に合わせたいと考えています。

これは私の最初の試みでした：

  #header {
    position: relative;
  }

  #title {
    font-size: 36pt;
    position: absolute;
    bottom: 0;
  }

予想外ではありませんが、振り返ってみると、これにより TITLE が #header の左端で左にフラッシュされます...しかし、タイトルの垂直位置には影響しませんでした。だから私は探していたものとは正反対のものを手に入れました。

だから私はこれを試しました：

  #title {
    position: relative;
  }

  #title h1 {
    font-size: 36pt;
    position: absolute;
    bottom: 0;
  }

私の理論では、これにより要素が含まれているh1要素の下部に配置されるというものでしたdivが、代わりに TITLE が完全に消えてしまいました。これは、どこかで表示されている画面からレンダリングされていることを意味していると思います。

この時点で、私は困惑しています。ここの誰かが私を正しい方向に向けてくれることを願っています。ありがとう！

4

2 に答える 2

1

ブループリントクラスの配置やフローティングを変更しないでください。それはフレームワークを台無しにします。

あなたがやろうとしていることは（私が思うに）タイプのベースラインを画像の下部に揃えることであるため、あなたがやろうとしていることは難しいでしょう。CSSを介してタイプのベースラインを決定する簡単な方法はありません。したがって、それらを整列させることは、ユーザーにロードされる特定のフォントに完全に依存します。画像の高さが50ピクセルの場合は、h1の線の高さを50ピクセルに設定してから、そこから微調整することができます。ただし、ブラウザごと、フォントごとに違いがあることを理解してください。

見出しを画像の一部にしてから、画像置換技術を使用してテキストを非表示にする方がよいでしょう。

于 2011-03-17T01:37:17.553 に答える
0

これを試してみて、それがあなたが達成しようとしていることであるかどうか私に知らせてください。

HTML：

<div id="container">
    <div class="logo">Logo here</div>
    <h1>TITLE</h1>
</div>

CSS：

#container{
    background-color:#ccc;
    position:relative;
    width:300px;
    height:200px;
}

.logo{
    width:110px;
    height:40px;
    background-color:#ff0000;
    margin: 0 auto;
}

#container h1{
    font-size:120%;
    font-weight:bold;
    text-align:center;
}

これがライブデモです：http：//jsfiddle.net/jrLL2/

于 2011-03-17T01:19:31.977 に答える