文字和图像重叠？

【问题标题】：text and image overlap?文字和图像重叠？
【发布时间】：2020-07-30 16:01:32
【问题描述】：


a += '<a href="' + data.response.lst[i].url + '" > <img src="/img/Group 600.svg" /> <span style=" font-size: 12px;color: #094A98;  font-weight: 700;font-family: open sans;   padding-left: 12px; word-break: break-word;"> ' + data.response.lst[i].display_Name + '</span></a>'

我已经创建了显示文本和图像的下拉菜单，但是当文本长度最大时，它显示在图像底部，如何解决？

【问题讨论】：

标签： html css

【解决方案1】：

包装在一个 div 中并分离出子元素。

我已经使用display:flex; flex-direction:row; flex-wrap:wrap; 设置了父 div 的样式，但您也可以通过使用 display:inline-block; 分配子元素来做到这一点

a += '<a href="' + data.response.lst[i].url + '" ><div style="display:flex; flex-direction:row; flex-wrap:wrap;"><div><img src="/img/Group 600.svg" /></div><div><span style=" font-size: 12px;color: #094A98;  font-weight: 700;font-family: open sans;   padding-left: 12px; word-break: break-word;"> ' + data.response.lst[i].display_Name + '</span></div></div></a>'

【讨论】：