질문

여기에 이미지 설명 입력


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>'

텍스트와 이미지가 표시되는 dropdown을 만들었지 만 텍스트 길이가 최대 일 때 이미지 하단에 표시됩니다. 해결 방법은 무엇입니까?

답변1

div를 래핑하고 자식 요소를 분리합니다.

display : flex로 부모 div 스타일을 지정했습니다. 플렉스 방향 : 행; flex-wrap : wrap; 하지만 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>'

출처 : https://stackoverflow.com/questions/63177004/text-and-image-overlap