CSSの位置

Question

シドニーモーター= =相対DIV Supersrprintである私は1つ上のワードスーパースプリントの位置を設定し、絶対DIV

であります行が動作しているが、相対的なdivに1行以上あるときにどうするかわからない、問題はいくつかのタイトルが1行であるということだ。他のタイトルはここのように2,3行あります。

私の質問どのように行の数に関係なく、絶対divの位置を設定する方法divの最後の行に、上記の画像でそれは公園の下になければなりません

ありがとう助けてください。

Answer 1

CSSを使って正確な解決策があるかもしれませんが、positionとpaddingプロパティを使用して、いつもこのような回避策を試すことができます。

私は<br>を使ってテキストを改行し、3つのデモシナリオを示しました。

body { 
 
    background: red; 
 
} 
 

 
h1 { 
 
    color: #fff; 
 
    position: relative; 
 
    padding-bottom: 20px; 
 
    font-size: 30px; 
 
} 
 

 
span { 
 
    color: #000; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
}

DEMO 1 
 
<h1 class="demo-1">SYDNEY MOTO. 
 
    <span>SUPERSPRINT</span> 
 
</h1> 
 

 
<hr> DEMO 2 
 
<h1>SYDNEY MOTOSPORT <br>PARK 
 
    <span>SUPERSPRINT</span> 
 
</h1> 
 
<hr> DEMO 3 
 
<h1>SYDNEY MOTOSPORT<br> PARK <br>NEW LINE TEXT 
 
    <span>SUPERSPRINT</span> 
 
</h1>