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

【问题标题】：How do I get the image and text on the same line?如何在同一行获取图像和文本？
【发布时间】：2015-03-09 23:54:39
【问题描述】：

我正在为我妈妈做一个咨询网站，我有一个联系方式部分，我试图将文本和图像放在同一行，但我不知道该怎么做，我尝试将图像和文本放在段落标签中，但没有奏效，我还尝试降低文本的字体大小，但没有奏效，请记住我正在做首先是移动设备尺寸，320 像素。

这就是它的样子：

这是 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%;
}

【问题讨论】：

您能否创建一个 jsFiddle.net 示例来显示该问题？您的示例 CSS 引用了一个 ID 为 contact_details 的元素，该元素在您的 HTML 示例中不存在。

标签： html css alignment positioning

【解决方案1】：

您可以在 ID“evettedetails”和“sheiladetails”以及图像标签上使用display:inline-block。还要正确关闭img 标签。这应该可以解决您的问题。

Here is the jsfiddle link

代码片段如下...

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

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

希望对你有帮助

【讨论】：