對齊文本旁邊的圖像（左側）

Question

我有是把文本上的圖像的左側的問題...

HTML CSS &

h2, social-hand { 
 
    font-family: 'PT Sans', sans-serif; 
 
    display: inline; 
 
    float: left; 
 
    margin-left: 95px; 
 
} 
 
    
 
p { 
 
    float: left; 
 
    margin-left: 95px; 
 
    margin-right: 400px; 
 
    margin-bottom: 20px; 
 
    margin-top: 50px; 
 
    position: absolute;  
 
    text-align: left; 
 
    display: inline; 
 
    font-family: 'PT Sans', sans-serif; 
 
}

<div class="social-hand"><img src="social-hand.jpg"> 
 
    <h2><big>Tittle Text</big></h2> 
 
    </div> 
 
    <p>Example Text <a href="About.html">Read More ></a> 
 
    </p>

And this is the result I'm getting...

任何幫助將是驚人的！

Answer 1

編輯像下面的代碼：

h2, social-hand { 
font-family: 'PT Sans', sans-serif; 
display: inline; 
margin-left: 95px; 
} 

.social-hand img{ 
float: right; 
margin: 0 0 10px 10px; 
} 

p { 
margin-left: 95px; 
margin-right: 400px; 
margin-bottom: 20px; 
margin-top: 50px; 
position: absolute;  
text-align: left; 
display: inline; 
font-family: 'PT Sans', sans-serif; 
} 

希望它能幫助。

Answer 2

嘗試使用顯示模塊來代替：

h2, social-hand { 
 
    font-family: 'PT Sans', sans-serif; 
 
    display: block; 
 
    float: left; 
 
    margin-left: 95px; 
 
} 
 
    
 
p { 
 
    margin-left: 95px; 
 
    margin-right: 400px; 
 
    margin-bottom: 20px; 
 
    margin-top: 50px;  
 
    text-align: left; 
 
    display: block; 
 
    float: right; 
 
    font-family: 'PT Sans', sans-serif; 
 
}

<div class="social-hand"><img src="http://via.placeholder.com/350x150"> 
 
    <h2><big>Tittle Text</big></h2> 
 
    </div> 
 
    <p>Example Text <a href="About.html">Read More ></a> 
 
    </p>