갤러리 썸네일 개수 수정 질문이요~~
본문
게시판관리에서
갤러리 이미지 수 3, 이미지폭 300, 높이 300으로 설정해도 안먹어서
style.css에서
#bo_gall .gall_li { width:100%/3); margin:0 0 10px 10px; border:1px solid #e0e0e0; padding:0; transition:all .3s }
#bo_gall .gall_li.notice { border-color:#888 }
#bo_gall .gall_li:nth-child(3n + 1) { clear:both }
이렇게 수정했거든요
근데 아래처럼 2+1 이런식으로 나오네요 ㅠㅠ
한 줄에 세개씩 보이려면 어떻게 수정해야 하는 건가요.....?
답변 3
안녕하세요...
@다람지이 님
먼저 개념을 이해해야 저 상황이 이해가 됩니다.
우리가 생각하기에 900사이즈에 300짜리 3개를 넣으면 다 들어갈꺼라고 생각하지만,
실제로는 화면상에 들어가지 않습니다. 이는 엑스트라 마진 때문에 그렇습니다.
엑스트라 마진뿐만 아니라 위 css 상에 보면 마진 레프트가 10px이나 붙어 있고 또한 100%/3 을 했으니
실제 99퍼센트긴 하지만, 마진이 총 20px이 넘어가기 때문에 총 크기를 넘어서 그게 들어가지 않는 겁니다
속된말로, 저 공간을 지가 비집고 들어갈 수 없다는 뜻입니다.
당장 눈으로 확인해볼수 있는건 마진 없애보세요
그리고 정상적으로 되는지 부터 보세요
만약 그래도 안된다면, 엑스트라마진 때문에 발생한 문제입니다.
정확한 구조는 알 수 없지만, 올려주신 태그에 gall_li 를 봐서는 ul / li 로 구성되어있는 것 같습니다.
.gall_li 에 font-size: 0; 을 주시면 엑스트라 마진이 삭제가 됩니다.
1. 마진 다 삭제
2. 폰트 사이즈0
그리고 꽉차는 화면에서 여백을 다시 주시면 원하시는 화면을 얻으실 수 있을 것입니다.
화이팅 하십시요.
왕초보를 위해 자세히 알려주셔서 감사합니다ㅠㅠ 알려주신대로 해볼게요!
float:left; 적용해서 해보시면 이렇게 깔끔하게 나옵니다.
다음 4번째는 다음칸으로 밀리구요
<style>
img {float:left; width:33.3%;}
</style>
<div>
<img src="https://picsum.photos/600/600/?random" alt="">
<img src="https://picsum.photos/600/600/?random" alt="">
<img src="https://picsum.photos/600/600/?random" alt="">
<img src="https://picsum.photos/600/600/?random" alt="">
<img src="https://picsum.photos/600/600/?random" alt="">
<img src="https://picsum.photos/600/600/?random" alt="">
</div>
