使图像和段落并排放置

Question

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

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

原文由 JamesTBennett 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Rowland Shaw 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

自罗兰 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 教程是了解更多信息的好地方。

原文由 Quentin 发布，翻译遵循 CC BY-SA 4.0 许可协议