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