html - 对齐图像旁边的文本(左侧)

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

尝试使用显示 block :

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>