Html 如何将一个图像、段落和另一个图像放在同一行？_Html_Css

Html 如何将一个图像、段落和另一个图像放在同一行？

html css

Html 如何将一个图像、段落和另一个图像放在同一行？,html,css,Html,Css,我想在html/css中的一行中放置一个图像、一个段落和另一个图像我是这样做的 <html> <body> <span style="float:left; display: inline-block; width: 20%;"> <img src="https://pbs.twimg.com/profile_images/762369348300251136/5Obhonwa.jpg" width

我想在html/css中的一行中放置一个图像、一个段落和另一个图像

我是这样做的

<html>
<body>
        <span style="float:left; display: inline-block; width: 20%;">
        <img src="https://pbs.twimg.com/profile_images/762369348300251136/5Obhonwa.jpg"  
         width="90" height="110" />
        </span>
        <span style="float:left;width: 60%;">
            <p style="float:left; display:block;">Lorem ipsum dolor sit amet,    
                consectetur adipiscing elit. Integer arcu mauris, ullamcorper et 
                ligula vitae, hendrerit sodales tellus. Maecenas quis pulvinar 
                lacus.</p>
        </span>
        <span style="float:right; width 20%;">
            <img src="https://www.google.ca/doodle4google/images/splashes/featured.png" width="90" height="110">
        </span>  
</body>
</html>


Lorem ipsum dolor sit amet，
献祭精英。整数arcu mauris，ullamcorper等
生命之舌，亨德雷特苏打粉。普尔维纳大师
拉克斯

我知道我可以在外部css表或样式标签中完成，但这是为了分配任务，所以我必须完成这三项工作。

以下是一个示例：

HTML:

因此，您的段落和imgs需要位于div class=“parent”中

所以显示：flex影响divs子项，即段落和img

注意：手机上的即时消息

您可以使用（在h4元素上，因为默认情况下它们是阻塞的）

或者可以将元素向左/向右浮动

float: left;

只是别忘了清理浮子

clear: left;

或者试试看

h4{宽度：80px；浮点：左}

$likes

.parent{
display:flex;
justify-content:center;
align-items:center;
flex-direction:row;
}

.children{
// whatever you want
// your paragraph and imgs need to be children of parent
}

display: inline-block;

float: left;

clear: left;