Question

我遇到的问题是将文字放在图像的左侧......

HTML＆amp; 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: 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>

对齐图像旁边的文本（左侧）

1 个答案: