如何在同一行上获取图像和文本？

Question

我正在为我的妈妈做一个咨询网站，我有一个详细联系信息部分，我试图将文字和图像放在同一行，但我不知道该怎么做，我已经尝试将图像和文本放在段落标记中，但它没有用，我也尝试降低文本的字体大小而且没有用，请记住我正在做的首先是移动尺寸，320px。

这就是它的意思：

这是HTML：

<div id="evettedetails">
    <h2>Evette</h2>
        <p><img src="images/social_icons/phone-4-16.jpg" class="mobile">Phone number</p>
        <p><img src="images/social_icons/email-16.jpg" class="mobile">Email Address</p>
        <p><img src="images/social_icons/linkedin-3-16.jpg" class="mobile">Linked In</p>
</div>

<div id="shieladetails">
    <h2>Shiela</h2>
        <img src="images/social_icons/phone-4-16.jpg" class="mobile"><p>Phone number</p>
        <img src="images/social_icons/email-16.jpg" class="mobile"><p>Email Address</p>
        <img src="images/social_icons/linkedin-3-16.jpg" class="mobile"><p>Linked In</p>
</div>

这是CSS：

#contact_details h2 {
    font-family: 'museo300', Arial, sans-serif;
    color: #0679B2;
    font-size: 15px;
}

#contact_details h3 {
    font-family: 'museo300', Arial, sans-serif;
    color: #0679B2;
    font-size: 12px;
    text-align: center;
    font-weight: normal;
}

#contact_details p {
    font-family: 'museo300', Arial, sans-serif;
    color: #0679B2;
    font-size: 12px;
}

#contact_details #evettedetails {
    float: left;
    width: 50%;
}

#contact_details #shieladetails {
    float: right;
    width: 50%;
}

Answer 1

你可以在ids＆＃34; evettedetails＆＃34;上使用display:inline-block和＆＃34; sheiladetails＆＃34;以及图像标签。同时正确关闭img代码。这应该可以解决你的问题。

Here is the jsfiddle link

代码片段如下......

＆＃13;

＆＃13;

#contact_details h2 {
  font-family: 'museo300', Arial, sans-serif;
  color: #0679B2;
  font-size: 15px;
}
#contact_details h3 {
  font-family: 'museo300', Arial, sans-serif;
  color: #0679B2;
  font-size: 12px;
  text-align: center;
  font-weight: normal;
}
#contact_details p {
  font-family: 'museo300', Arial, sans-serif;
  color: #0679B2;
  font-size: 12px;
}
#evettedetails,
#shieladetails {
  float: left;
  display: inline-block;
  width: 50%;
}
img {
  display: inline-block;
  float: left;
}

＆＃13;

<div id="evettedetails">
  <h2>Evette</h2>

  <div>
    <img src="images/social_icons/phone-4-16.jpg" class="mobile" />
    <p>Phone number</p>
  </div>
  <div>
    <img src="images/social_icons/email-16.jpg" class="mobile" />
    <p>Email Address</p>
  </div>
  <div>
    <img src="images/social_icons/linkedin-3-16.jpg" class="mobile" />
    <p>Linked In</p>
  </div>
</div>
<div id="shieladetails">
  <h2>Shiela</h2>

  <div>
    <img src="images/social_icons/phone-4-16.jpg" class="mobile" />
    <p>Phone number</p>
  </div>
  <div>
    <img src="images/social_icons/email-16.jpg" class="mobile" />
    <p>Email Address</p>
  </div>
  <div>
    <img src="images/social_icons/linkedin-3-16.jpg" class="mobile" />
    <p>Linked In</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助