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