如何将图像放在中间段落旁边，仅限html答案

【问题标题】：How to put images next to paragraphs in the middle, html only如何将图像放在中间段落旁边，仅限html
【发布时间】：2017-10-27 10:21:38
【问题描述】：

我正在网页上开发 WordPress。我在网页中间有一些段落，上面有一个菜单。因此，当您单击它时，您将转到该段落。（但我仍然必须这样做）

但我的问题是如何在段落旁边放置图片而不让段落失去位置？

我用 float 等尝试了不同的方法，但我认为在某个地方出错了。我不太擅长 HTML 和 CSS，我还在学习，但我真的很喜欢 :)

这是预览：https: //plnkr.co/edit/wUOxCgCTLRfkvnJLVKLa?p=previeW

图片不必与段落的高度完全相同。

我希望我说清楚了！！

【问题讨论】：

【解决方案1】：

谢谢大家的回答。网格系统听起来是个不错的解决方案，不知道到底有多难。

我尝试了您的代码 vijayscode，我明白您的意思并且它有效。只有当我尝试在页面中间制作段落时，图像才会出现在段落的顶部而不是旁边。它以 20% 的边距保持在它旁边。但是当我做超过 20% 时，图像会出现在段落上方:(

【讨论】：

【解决方案2】：

方法有很多，你可以用：

<html>
<style>

#img {
vertical-align: middle
}

.div1 {
display: inline-block
}

</style>
</html>

为了更好地控制空间，请使用网格系统。在这里你可以学习如何使用它：https://www.w3schools.com/Css/css_rwd_grid.asp

祝你有美好的一天！

【讨论】：

【解决方案3】：

有很多方法可以并排对齐 div 和图像。最简单的方法是为图像和文本的容器 div 设置 display:inline-blockproperty。

https://jsfiddle.net/a7b3ep7a/

希望它会有所帮助；）

【讨论】：