ニーズに合わせて値を調整できますが、私が作成した Fiddle を参照してください: http://jsfiddle.net/EezLZ/
実際には、より多くの相対値を使用してすべての配置を簡単にするために、CSS にいくつかの重要な調整を加えました。フィドルの CSS 部分にかなりの数のコメントを追加しました。それらも確認してください。主な変更点について説明があります...
.hbox {
position:relative;
margin-top:2em;
padding:0.15em;
padding-left:3em;
/* ... */
}
位置:相対
hboxはプライマリ コンテナであるため、コンテナにposition:relative基づいてすべての子要素を配置できるようにします。これがなければ、少なくとも一部のブラウザーは親コンテナー要素を使用できます。親に関連して大きな数を配置したいので、これが必要です。
margin-top:2em
数字を上部の一部に重ね、ボックス間のスペースを確保したいので、各ボックスに 2em の距離を与えます。1em は、ボックスと 1em の間のスペースをカバーして、数字の部分的な重複を考慮します。もちろん、デザインに応じて値を調整できます。また、EM で作業すると、このデザインを (ピクセルではなく) 調整しやすくなります。
パディング:0.15em
ボックスの周囲全体に標準的なパディングを行います。繰り返しますが、この値は設計に合わせて簡単に調整できます。
パディング左:3em
私たちの望みは、左側に大きな「数」を持つことです。この番号を「ホバー」して、ドキュメントの「フロー」から削除します。そのため、これを考慮してボックス内にスペースを確保する必要があります。そうしないと、ボックス内のコンテンツが番号の下に流れ、番号がオーバーラップします。
.hbox h3 {
position:absolute;
top:-0.5em;
left:0.1em;
margin:0;
padding:0;
font-size:300%;
}
位置:絶対;
スタイルのセットアップはhboxこれにつながります。「数値」要素を絶対に配置してフローから削除し、コンテナに関連する任意の場所に配置できるようにします。
上:-0.5em;
top:0要素をボックスの上部と同じ高さに配置します。少しオーバーハンドが必要なので、負の値を使用してもう少し上に移動します。正の値を指定すると、要素が上から離れて下に移動します。繰り返しますが、設計のニーズに合わせて実際の値を調整してください。
左:0.1em;
上と同じようにleft:0、要素をコンテナの左端に揃えて配置します。少しだけ間隔をあけました。必要に応じて調整します。
マージン:0; パディング:0;
ブラウザーは、要素にデフォルトのパディング/マージンを与えることができます。設計に干渉しないように、これらをゼロに設定します。
フォントサイズ:300%;
フォント サイズ (対ピクセル) にはパーセンテージ (または EM) を使用します。これにより、よりクリーンなデザインを維持し、要素をより正確に調整することができます。これで、この数値が基本フォントの「3 倍」であることがわかります。ベースフォントが 1em の場合、その 3 倍は 3em です。これにより、ピクセル サイズを推測せずにパディング/マージンを調整できます。また、ベース フォント サイズが変更された場合は、すべてが相対的にスケーリングされます。
.hbox p {
font-size:75%;
color:#859489;
text-shadow:#6F7678 0px 0px 1px;
}
コンテナとタイトルを設定するため、コンテンツを配置する必要はありません。必要に応じてスタイルを設定するだけです。
弱点
注意点・・・このデザインの弱点は、絶対位置の数字です。ワークフローから削除されているため、コンテンツがほとんどまたはまったくないコンテナー ボックスでは、数字が十分に大きい場合、数字が下端に重なる可能性があります (つまり、タグのフォント サイズを十分に大きくして単一の行、パディングはほとんどありません)。
これが発生するには、フォント サイズがかなり大きく、コンテンツが十分に小さい必要があるため、この弱点は小さいはずですが、まれなケースである可能性があります。
それが役立つことを願っています！
乾杯！
