Material UI + Tailwind 将图像放在文本右侧

Question

只需使用“float-right”。当然，它比这复杂一点。我的反应项目中有以下代码：

<div style={{marginLeft: 20,wordWrap: "break-word",width: 350}}>
  <h1 className="text-4xl font-bold">Vivamus suscipit tortor eget felis porttitor.</h1>
  <img className="float-right" alt="test" src="https://dummyimage.com/100"/>
</div>

我希望图像位于文本的右侧，但现在看起来像这样：

但是我想要文本右侧的 100x100 图像，我该怎么做呢？而且这样做也行不通：

<div style={{marginLeft: 20,wordWrap: "break-word",width: 350}}>
  <h1 className="text-4xl font-bold">Find out what were working on and more in our blog</h1>
</div>
<img className="float-right" alt="test" src="https://dummyimage.com/100"/>

我真的很不擅长CSS...

Answer 1

使用 display: flex 并排显示图像和文本。这是可能的，因为默认 flex-flow 值为 row .

如果想防止图像或 flex 中的任何内容缩小，请使用 flex-shrink: 0;，但这在您定义 width height 值

时有效

div {
  display: flex;
  flex-shrink: 0;
}

img {
  width: 100px;
  height: 100px;
}

<div style="marginLeft: 20,wordWrap: " break-word ",width: 350">
  <h1 className="text-4xl font-bold">Vivamus suscipit tortor eget felis porttitor.</h1>
  <img alt="test" src="https://dummyimage.com/100" />
</div>

Material UI + Tailwind 将图像放在文本右侧

Material UI + Tailwind put image right of text

css

reactjs

tailwind-css