board_top_banner에 이미지 마다 간격을 주려면? 채택완료
위 그림에...3개의 이미지를 넣었는데요.
좌우에 빈 공간이 많고, 이미지 사이가 너무 좁아서.
적당하게 나열하려는데...마진을 어떻게 주면 될까요?
http://bapair.ticket.com/b/share05-7374">http://bapair.ticket.com/b/share05-7374">http://bam.tvnticket.com/img/bb2.png">http://bam.tvnticket.com/img/bb2.png" width="218" height="153">
bapair.ticket.com/b/share01-1943">http://bam.tvnticket.com/img/bb3.png">http://bam.tvnticket.com/img/bb3.png" width="218" height="153">
bapair.ticket.com/b/share05-1295">http://bam.tvnticket.com/img/bb1.png">http://bam.tvnticket.com/img/bb1.png" width="218" height="153">
답변 2개
답변이 없어서 글 남깁니다. div 의 경우 text-align: center 이게 안먹히는 브라우저가 있습니다.
좀 구식이긴 하지만 센터정렬할땐 테이블을 씁니다.
</p><p><table width="100%" height="153px"></p><p style="margin-left: 40px;"><tr></p><p style="margin-left: 80px;"><td width="33.3333%" align="center"></p><p style="margin-left: 80px;"><a href="<a href="<a href="http://bapair.ticket.com/b/share05-7374" target="_blank" rel="noopener noreferrer">http://bapair.ticket.com/b/share05-7374</a>"><a href="http://bapair.ticket.com/b/share05-7374" target="_blank" rel="noopener noreferrer">http://bapair.ticket.com/b/share05-7374</a></a>"><img src="<a href="<a href="http://bam.tvnticket.com/img/bb2.png" target="_blank" rel="noopener noreferrer">http://bam.tvnticket.com/img/bb2.png</a>"><a href="http://bam.tvnticket.com/img/bb2.png" target="_blank" rel="noopener noreferrer">http://bam.tvnticket.com/img/bb2.png</a></a>" width="218" height="153"></a></p><p style="margin-left: 80px;"></td></p><p style="margin-left: 80px;"><td width="33.3333%" align="center"></p><p style="margin-left: 80px;"><a href="http://<span style="font-size: 14.66px;">bapair.ticket.com</span>/b/share01-1943"><img src="<a href="<a href="http://bam.tvnticket.com/img/bb3.png" target="_blank" rel="noopener noreferrer">http://bam.tvnticket.com/img/bb3.png</a>"><a href="http://bam.tvnticket.com/img/bb3.png" target="_blank" rel="noopener noreferrer">http://bam.tvnticket.com/img/bb3.png</a></a>" width="218" height="153"></a></p><p style="margin-left: 80px;"></td></p><p style="margin-left: 80px;"><td width="33.3333%" align="center"></p><p style="margin-left: 80px;"><a href="http://<span style="font-size: 14.66px;">bapair.ticket.com</span>/b/share05-1295"><img src="<a href="<a href="http://bam.tvnticket.com/img/bb1.png" target="_blank" rel="noopener noreferrer">http://bam.tvnticket.com/img/bb1.png</a>"><a href="http://bam.tvnticket.com/img/bb1.png" target="_blank" rel="noopener noreferrer">http://bam.tvnticket.com/img/bb1.png</a></a>" width="218" height="153"></a></p><p style="margin-left: 80px;"></td></p><p style="margin-left: 40px;"></tr></p><p></table></p><p>
이렇게 하면 3개의 이미지를 3으로 나누어 넣을수 있습니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
a 태그로 전부 만들거면
빈 a 태그를 이미지사이에 삽입하는 방법도 있죠
a 태그로 전부 만들거면
빈 a 태그를 이미지사이에 삽입하는 방법도 있죠
이렇게 한줄에 넣고
디스플레이 속성은 인라인블럭으로 지정하시면 줄 안미끄러질거고
빈 a 태그랑 이미지 들어있는 a 태그랑 class 값 다르게 주셔서 폭지정다르게 해주시면
원하는 폭 만큼 간격 줄 수 있겠죠..
아니면 이미지 갯수를 변수로 놓고
마진값을 이미지에 적용하고 마지막꺼만 마진값을 안주는 방법도 있습니다.
for문을 써서 $i 에다가 이미지 갯수를 넣고
출력할때 마지막놈만 class에 margin-right 값을 빼버리는거죠..
최신글 뽑을때는 보통 이렇게 합니다.
$list 라는 변수를 count() 하면 갯수가 바로 나오니까요..
방법은 여러가지니까.. 취향에 맞는거로 하심이..
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
감사드립니다.