CSS-文本移

Question

我有一種在我的網站標題，看起來像這樣：

我的文字：

當我rezise窗口出現的問題正在向上移動，我想讓它舒展下來。這是我的HTML代碼：

  <div class="inner, header2"> 
       <div class="first"> 

        <img src="images/clean/kim_icon.png" alt="" /> 
       </div> 
       <div class="second"> 
        <p class="section">S.I.M.B.A. (Smart Infant Management and Breath Aid)</p> 
       </div> 
      </div> 

我的CSS：

.header2 { 
text-align: left; 
padding: 3em 6em 0em 6em; 
overflow: hidden; 
position: relative; 
} 

.first { //image 
float: left; 
} 

.second { //text 
float: left; 
position: absolute; 
bottom: 0em; 
left: 12em; 
} 

p{ 
font-size: 2.75em; 
margin-bottom: 1em; 
line-height: 100%; 
margin: 0 0 2em 0; 
} 

Answer 1

一種選擇是使用Flexbox的。文字將盡可能放在底部。

.header2 { 
 
    display: flex; 
 
} 
 

 
.second { 
 
    align-self: flex-end; 
 
} 
 

 
p { 
 
    font-size: 2.75em; 
 
    margin: 0; 
 
}

<div class="inner header2"> 
 
    <div class="first"> 
 
    <img src="http://placehold.it/100" alt="" /> 
 
    </div> 
 
    <div class="second"> 
 
    <p class="section">S.I.M.B.A. (Smart Infant Management and Breath Aid)</p> 
 
    </div> 
 
</div>