我有一个固定高度的包装div,里面有两个对象:一个位于左上角的图标和一些与底部对齐的文本。如果有足够的文本(3行),则上一行与图标处于同一级别。我希望文本围绕图标流动,占据图标下方的整个水平空间,但不要重叠。
下面是我试图实现的一个模型:
我使用
float:right
对于包含图标的div。如果我设置
display: flex
或
grid
对于包装器div,我可以将span与文本底部对齐,但图标占据了整行。如果我将图标放在带有文本的范围内,图标将放在范围的顶部,根据行数的不同,图标可以更低或更高。
是否可以使用纯CSS?
