Html 单独使用CSS将图像放置在四个不同的可能位置

我真的很难用语言来表达，但我会努力的。我有一个div，里面有一些文本，这个文本是动态的，所以它可以根据用户输入的不同长度

现在，我希望该选项能够将图像放置在以下位置之一，具体取决于“选择”下拉列表的值，该下拉列表将放置图像：

Above the text
Below the text
Left of text
Right of text

我想知道是否有一种简单的方法可以保持标记不变，即

<img src="">
<span>Text</span>

正文

但是使用CSS将图像的位置更改为上述任何一个位置。需要注意的是，文本的宽度和高度是动态的，因此不可能使用精确的像素

---

如果可能的话，我宁愿避免使用javascript

在图像上使用float:left、right或none（使用样式表）。不能使用CSS将图像放置在文本下方。

使用浮动：图像上的左、右或无（使用样式表）。您不能使用CSS将图像放置在文本下方。

这就是您所需要的：

.container{
显示器：flex；
}
#p-下方：选中~.容器{
弯曲方向：柱反向；
}
#p-右：选中~.容器{
弯曲方向：行反向；
}
#p-以上：选中~.容器{
弯曲方向：立柱；
}

.container{
显示器：flex；
}
#p-下方：选中~.容器{
弯曲方向：柱反向；
}
#p-右：选中~.容器{
弯曲方向：行反向；
}
#p-以上：选中~.容器{
弯曲方向：立柱；
}
/*以下所有内容都是完全可选的*/
.集装箱{
证明内容：中心；
对齐项目：居中；
}
.container>.text{
边框：1px实心#4242；
填充：1rem；
}
.container.image>img{
显示：块；
}

在上面
在下面
左边
赖特
Lorem ipsum dolor sit amet。这里有尽可能多的文字。

这就是您所需要的：

.container{
显示器：flex；
}
#p-下方：选中~.容器{
弯曲方向：柱反向；
}
#p-右：选中~.容器{
弯曲方向：行反向；
}
#p-以上：选中~.容器{
弯曲方向：立柱；
}

.container{
显示器：flex；
}
#p-下方：选中~.容器{
弯曲方向：柱反向；
}
#p-右：选中~.容器{
弯曲方向：行反向；
}
#p-以上：选中~.容器{
弯曲方向：立柱；
}
/*以下所有内容都是完全可选的*/
.集装箱{
证明内容：中心；
对齐项目：居中；
}
.container>.text{
边框：1px实心#4242；
填充：1rem；
}
.container.image>img{
显示：块；
}

在上面
在下面
左边
赖特
Lorem ipsum dolor sit amet。这里有尽可能多的文字。

查看flexbox及其

顺序

属性。您尚未定义上面的

和下面的
。根据两个元素在这些位置是否重叠，它们可能意味着两个不同的东西。@AndreiGheorghiu No overlapple查看flexbox及其
order
属性。您没有在上面定义
，在下面定义
。根据两个元素在这些位置是否重叠，它们可以表示两种不同的东西。@AndreiGheorghiu No overlapple优雅的解决方案+1优雅的解决方案+1