使图像和段落相邻

Question

我有一个带有图像和一些文本的盒子，我希望文本与图像水平。我知道这可能是一个非常简单的问题，但我似乎无法在互联网上找到好的答案。感谢您的帮助。

<div id='container'>
 <img src='someimage.jpg'/>
 <p>some text</p>
</div>

Answer 1

我建议您将文本和图像放在一个表格中，在同一行中，图像位于第一列，而文本位于第一行的第二列。这是代码

<div id='container'>
  <table>
    <tr>
     <td><img src='someimage.jpg'/></td>
     <td><p>some text</p></td>
    </tr>
  </table>
</div>

Answer 2

自从 Rowland 2010 年的回答以来，CSS 已经取得了长足的进步。今天我们有 Flexbox 它是 CSS 的一部分用于控制行或列中元素的布局。它具有很大的灵活性，可以处理框内的对齐以及扩展或收缩元素以适应。

下面是一个简单的示例，说明如何设置您提供的 HTML 的样式（将图像 URL 更改为将在此处呈现的 URL）。

#container {
    display: flex;
    align-items: center;
}

#container p {
    margin-left: 1em;
}

<div id='container'>
  <img src='http://placekitten.com/100/100' alt="" />
  <p>some text</p>
</div>

上面链接的 MDN 教程是了解更多信息的好地方。

Answer 3

看一下CSS的float属性，例如：

<div id='container'>
 <img src='someimage.jpg' style='float: left;'/>
 <p>some text (that will now wrap around the image</p>
</div>