CSSタイトル行の実装（行削除効果による行削除）

実は、この質問を見たとき、すでに頭の中でコードを書いていました~次のように思いました:

そうですね、基本的にこの方法は毎日使っているので問題ありません~、背景色を設定しましょうそしてそれはオイラーになります。

しかし、問題が発生したため、さらに詳しく知る必要があることがわかりました。

さあ、下の図を見てください。要件は次のようになり、効果は次のように達成されます(最初に実装コードを考えて、アイデアが似ているかどうかを確認できますか?)

があることがわかります。この線の後ろの背景 画面サイズが広くなると背景の絵が隠れてしまいますが、縮小すると背景の絵が隠れなくなりますので、背景色を塗りつぶすという通常の書き方はできません。別の方法を見つけるだけです (これを達成するための何か良い方法は考えられますか?)

それで問題は、画面の伸縮により、コンテンツ領域に収容できるコンテンツが異なり、その結果、高さが異なり、各要素も画面の高さに応じて増加します。結論として、背景色の使用は機能しません。

もちろん、これは特殊な場合で、写真を直接アップロードできると言われるかもしれませんが、この方法はもちろんOKですが、そのようなブロックはたくさんあります、それらはすべて直接アップロードできますか？絶対にうまくいきませんよ〜。 怠け者なら怠け者になってください。 一回限りの解決策を見つけることができれば、それが終わった後で明らかになります。コピーライティングに問題があることがわかり、表現を変更するのは骨が折れるでしょう。

方法

それでは、上記の問題を解決する方法を考えてみましょう。

フロートから始めましょう。実際、これは一般的な 3 列の Web ページ レイアウトとして理解できます。セット？ということでパス

floatが動かないので、今回はpositionを使ってみましょう〜 使い方は最初と同じですが、今回は背景を使用できません。この問題に対処する方法を見てみましょう。

まず基本的な構造:

Headling

疑似クラス: before と :after を使用して無関係なものを生成できますが、より明確にするためにタグを直接使用します。

これは改良版です。構造:

Headling

次に、スタイルを指定します (答えは中にあります):

.title { position: relative; z-index: 2; font-size: 16px; line-height: 24px; text-align: center; color: #999; overflow: hidden; }.title .caption { position: relative; display: inline-block; }.title .caption .line { position: absolute; top: 11px; width: 600px; height: 1px; background-color: #ddd; }.title .caption .line-l { right: 100%; margin-right: 15px; }.title .caption .line-r { left: 100%; margin-left: 15px; }

上記のスタイルを見て、何かヒントは見つかりましたか?実装の詳細を説明します:

• まず、.caption をインライン ボックスとして設定し、相対的に配置します

• 次に、2 つの行の位置が .caption に含まれ、それらをそれぞれの場所にプッシュします(左: 100%、右: 100%)、この 100% を誰が計算したか知っているはずですよね? (はい、これは最初のステップの .caption です。結果は推測できたはずです?)

• 最後に、margin-left/right を使用してギャップを分離します。これは私たちのニーズを満たします

幅.line の設定が長すぎるため、オーバーフローを削除して適応できるようにすることができます。ここで小さな質問があります:

この行の問題を解決するには、上記の方法を使用してください~