只需使用 "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...
uj5u.com熱心網友回復：
用于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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/335870.html