テキストを斜めの画像に揃える方法
公開: 2022-02-16
OSTrainingのある顧客は、両方の要素の間にスペースを保ちながら、対角線の画像の横にテキストを配置する方法を求めました。
私の最初の考えは、テキストの特定のポイントにブレークラインを追加することでしたが、サイトが応答性が高かったため、それは機能しませんでした。
お客様と話し合った後、よりエレガントなソリューションを思いつきました...
ユースケース
この例では、テキストを左に、画像を右に揃える必要があります。 ここでの本当の課題は、テキストが画像に重なってはいけないということです。 必要な結果を以下に示します。
ソリューション
右側に浮かぶ空のdivを動的な幅の値で追加して、テキストが画像に重ならないようにすることができます。 この例では、画像がCSSで背景として追加されていることに注意してください。
HTML
この例のHTMLは次のようになります。
<div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <p>A buch of dummy text goes here...</p> </div>スペーシングクラスを持つ複数の空のdivに気付くことができます。 これらの要素をいくつかのCSSと組み合わせると、テキストと画像の間に間隔ができます。
間隔divの数は、画像の高さを埋めるために必要なテキスト行の数と同じです。 この例では、画像を14本の線で覆う必要があります。
CSS
説明をわかりやすくするために、必要なCSSをいくつかの部分に分割します。
#container { background-image: url(bg.png); background-repeat: no-repeat; background-position: right top; background-size: 300px auto; min-height: 300px; }画像を特定の位置とサイズの背景として定義します。
#container p { line-height: 22px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; }#containerpセレクターはテキストを参照します。 後で他のプロパティの値を計算するために、フォントサイズと行の高さを定義することが非常に重要です。
.spacing { float: right; clear: right; height: 22px; }このプロパティは、空のdivに右側にフロートするように指示します。 heightの値は、段落のline-heightに使用する値と同じであることに注意してください。
.spacing:nth-child(1) { width: 305px; } .spacing:nth-child(2) { width: 283px; } .spacing:nth-child(3) { width: 261px; } .spacing:nth-child(4) { width: 239px; } .spacing:nth-child(5) { width: 217px; } .spacing:nth-child(6) { width: 195px; } .spacing:nth-child(7) { width: 173px; } .spacing:nth-child(8) { width: 151px; } .spacing:nth-child(9) { width: 129px; } .spacing:nth-child(10) { width: 107px; } .spacing:nth-child(11) { width: 85px; } .spacing:nth-child(12) { width: 63px; } .spacing:nth-child(13) { width: 41px; } .spacing:nth-child(14) { width: 19px; }
上記のコードは、電卓を使用するために必要な楽しい部分です。
.spacing：nth-child（1）に選択された幅の値は、spacingクラスを持つ最初のdivに適用されます。同様に、 .spacing：nth-child（2）は、間隔要素に到達するまで、わずかに小さい幅を定義します。番号14。
右側の空のdivごとに動的な値を上から下に定義する理由により、画像をオーバーレイせずにテキストを左に揃えることができます。
そうは言っても、これらの空のdivのそれぞれの幅をどのように計算できますか？ 答えには、次の値に基づく小さな式が必要です。
- テキストの行の高さ（私の例では22px）
- 背景サイズ（この例では300px）
最初の空のdivの幅は305pxです。これは、定義された背景の幅に、テキストが画像の端に近づきすぎないようにするために含めることにした5つの追加ピクセルの値です。
レスポンシブサポート
サンプルコードを使用すると、デザインはどの画面サイズでも正常に機能します。 デモを見て、ブラウザのサイズを変更して、動作を確認してください。
デモを見る
ボーナス：少ない
CSSに直接アクセスする代わりの方法の1つは、LESSです。 LESSを初めて使用する場合は、チュートリアルがあります。
LESSを使用して同じ結果を生成し、数学を気にすることなく、スペーシングクラスを使用して各divの複数の幅の値を簡単に動的に作成できます。
@textHeight: 22px; @backgroundWidth: 300px; @extraSpacing: 5px; @initialWidth: @backgroundWidth + @extraSpacing; @textLines: @backgroundWidth / @textHeight;変数を使用して、テキストの高さと背景の幅を決定します。
#container { background-image: url(bg.png); background-repeat: no-repeat; background-position: right top; background-size: @backgroundWidth auto; min-height: @backgroundWidth; }コンテナのプロパティ。
#container p { line-height: @textHeight; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: @textHeight - 8; } .spacing { float: right; clear: right; height: @textHeight; }いくつかの変数に基づいて動的に計算されたテキストと間隔のプロパティ。
.generate-spacing(@i, @end) when (@i <= @end) { .spacing:nth-child(@{i}) { width: @initialWidth - ((@i - 1) * @textHeight); } .generate-spacing((@i + 1), @end); } .generate-spacing(1, @textLines);すべての空のdivの動的幅を生成するループ。
Codepenでこのコードをテストする