Aligning Text neben einem Bild (links)

Question

Das Problem, das ich habe, ist Text auf der linken Seite eines Bildes setzen ...

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...

Jede Hilfe wäre toll!

Answer 1

bearbeiten Sie den Code wie folgt:

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; 
} 

Hoffe, es hilft.

Answer 2

Versuchen Block mit Display statt:

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>