flex를 하면 li 간격이 자동으로 height에 맞춰집니다.. 채택완료
flex를 하고 flex-wrap을 했더니 li간격이 옆 이미지 높이에 맞춰집니다..
그런데 따로 설정한것도 없고 마진도 해보고 갭도 지워보고했는데ㅠㅠ
이유를 모르겠습니다... 개발자모드를 켜서 하나씩 꺼보았는데도 변동이 없습니다ㅠㅠ
어떤 코드를 추가 또는 변경해야 할지 여쭤봅니다
이거랑 무관할 것 같지만 그래도 설명드리자면 카페24쇼핑몰입니다ㅜㅜ
http://sir.kr/data/editor/2412/1025970347_1734656759.1133.png" width="100%" />
아래처럼 촘촘하게 하고 싶어서요
http://sir.kr/data/editor/2412/1025970347_1734656780.4017.png" width="100%" />
링크 들어가시면 위에는 통이미지이고
이를 토대로 아래 코드를 짜고 있습니다.
최하단 봐주시면 감사하겠습니다..( _ _ )
답변 2개
기존에 갭 30을 10으로 변경
얼라인 컨텐츠 센터를 추가 해주세요
</p>
<p>#partner .sec03 .k_partner_detail ul{</p>
<p>align-content: center;</p>
<p>gap: 10px;</p>
<p>}</p>
<p>로 변경하시면 원하는데로 되실 껍니다.
답변에 대한 댓글 3개
align-content 입니다. 둘은 다릅니다.
댓글을 작성하려면 로그인이 필요합니다.
해당요소에 클래스 하나 추가하고 선택자 우선순위 높여서 스타일 재정의 하시면 됩니다.
요소간 거리는 margin (또는, margin-bottom) 속성 이용하시면 됩니다.
답변에 대한 댓글 3개
[code]
#partner .sec03 .k_partner_detail ul {width: 50%; gap: 30px;}
#partner .sec03 .k_partner_detail ul li {background: #d4e6e5; font-size: 22px; border-radius: 10px; display:flex; flex-wrap:wrap; width: 328px; height: 45px;
text-align: center; justify-content: center; align-items: center;}
[/code]
클래스 추가하여 코드 추가하였습니다.
[code]
#partner .sec03 .k_partner_detail ul {width: 50%; gap: 30px;}
#partner .sec03 .k_partner_detail ul li {background: #d4e6e5; font-size: 22px; border-radius: 10px; display:flex; flex-wrap:wrap; width: 328px; height: 45px;
text-align: center; justify-content: center; align-items: center;}
#partner .sec03 .k_partner_detail .text_wrap {display: flex; flex-wrap:wrap;}
#partner .sec03 .k_partner_detail .text_wrap .text {margin-bottom:0;}
[/code]
이렇게 해도 그대로입니다..선택자 우선순위를 어떻게 높혀야 할지..
더 자세한 건, https://homzzang.com/b/css-5 (선택자 우선순위)에 관해서 공부해 보세요.
또한 다른 원인이 있을거라고 생각했습니다. items가 아니고 content였습니다 도와주셔서 감사드립니다!
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
적용한 내용 링크로 확인부탁드리겠습니다ㅠㅠ