퍼블? 질문 좀 드립니다. 채택완료
이렇게 최신글을 만들고 있는데 문제가 생겼습니다.
제가 원하는 건 하단의 이미지 처럼 '애국가 1절'과 '애국가 2절'이 같은 라인에 수평하게 있는 겁니다.
하지만 상단 처럼 '애국가 1절'이 위로 달라 붙네요 ㅠㅜ
제가 잼병이라 막막합니다.
</strong></p>
<p><div></p>
<p><ul></p>
<p> <li></p>
<p> <div></p>
<p> <span>text001-동해물과 백두산이</span></p>
<p> <ul></p>
<p> <li></p>
<p> 애국가 1절입니다.</p>
<p> </li></p>
<p> </ul></p>
<p> </div></p>
<p> </li></p>
<p></ul></p>
<p></div></p>
<p><strong>
이런 구조로 되어 있습니다.
큰 ul에 flex를 사용해서 만들었습니다.
머리 속에는 작은 ul을 bottom 정렬 하면 될 거 같은데 아무리 구글링을 해도 못 찾겠네요 ㅜㅠ
도움 좀 부탁드립니다.
답변 3개
저라면 div에 flex를 column으로 줘서 justify-content: space-between 줄 것 같아요
대신 span의 컨텐츠에 따라 높이가 달라질 수 있으니 div 높이도 고정이어야할거고..
span에 일정 길이 이상이 되면 ellipsis 처리 정도 할 듯합니다
댓글을 작성하려면 로그인이 필요합니다.
이건 해결하시려면 스크립트넣어서 하셔야될텐데 굉장히 비추천드립니다
제목이 두줄이 될지 세줄이 될지 모르는 상황에서 높이값을 주면
한줄일 경우 너무 붕 뜨게되죠
스크립트넣어서 해결하실거면 각 요소마다 반복문으로 높이값을 구해서
모든 요소에 같은 높이값을 주도록 해주셔야됩니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
하지만 span은 inline 형식이라 높이나 넓이 지정이 안됩니다 ㅜㅠ