css - 如何使我的图像内联到我的组件内容的左侧？

Question

我有一张图片，其中包含标题等详细信息。任何人都可以告诉我如何使其内联并位于其他内容的左侧吗？附上一张图片来解释我要做什么。

return (
    <div key={obj.employee}>
        <p>{obj.employee}</p>
        <p>{obj.favDog}</p>
        <img alt={obj.favDog} src={obj.img} />
    </div>
)

Answer 1

只需将 display: flex; 添加到您的外部容器中，一切都应该很好地放置!

Here is a Demo Fiddle

然后您可以根据需要添加边距和其他样式。

如果你想了解更多关于 flexbox 的知识，this is an excellent reference .还有 MDN flexbox docs .