DIV 태그... 줄바뀌는거 질문입니다!
본문
DIV 태그로 작업을 하고 있는데...
테이블로 짜다가 이걸로하니까 좀 이해가 잘 안되네요 ㅎㅎ;;;
요게 지금 출력되는 화면에서 짤라온건데...
공지사항 ㅣ 보도자료 ㅣ 더보기
요렇게 한줄에 나오게 하고 싶은데... 잘안되네요;;; 계속 줄줄이로 나오네요 ㅠㅠ
<div id="board_list_output">
</div>
function menuB(id,cont,total,num) {
var id = id;
var cont = cont;
var total = total;
var menu = new Array();
var content = new Array();
for(j=0; j <= eval(total); j++) {
menu[j] = document.getElementById(id + eval(j+1));
content[j] = document.getElementById(cont + eval(j+1));
}
for(var i=0 ; i<= eval(total); i++) {
if (i == num) {
menu[i].style.display = '';
content[i].style.display = '';
}
else {
menu[i].style.display = 'none';
content[i].style.display = 'none';
}
}
}
</script>
<div id="mttt_1" class="tab" style="display:inline;">
<a href="{{$template}}/base/img/main/a1.jpg" id="more_link" class="more"><img src="{{$template}}/img/main/more.gif" title="" alt="더보기"></a>
<a href="#" style="cursor:pointer;" onclick="menuB('mttt_','mbbs_',1,0);"><img src="{{$template}}/img/main/output_tab_1_on.gif" title="" alt="공지사항"></a>
<a href="#" style="cursor:pointer;" onclick="menuB('mttt_','mbbs_',1,1);"><img src="{{$template}}/img/main/output_tab_2_off.gif" title="" alt="보도자료"></a>
</div>
<div id="mttt_2" class="tab" style="display:none;">
<a href="{{$template}}/customer/customer05.php?sub=05" id="more_link" class="more"><img src="{{$template}}/img/main/more.gif" title="" alt="더보기"></a>
<a href="#" style="cursor:pointer;" onclick="menuB('mttt_','mbbs_',1,0);"><img src="{{$template}}/img/main/output_tab_1_off.gif" title="" alt="공지사항"></a>
<a href="#" style="cursor:pointer;" onclick="menuB('mttt_','mbbs_',1,1);"><img src="{{$template}}/img/main/output_tab_2_on.gif" title="" alt="보도자료"></a>
</div>
<div id="mbbs_1">
<div style="height:88px;">
<img src="{{$template}}/img/main/a1.jpg" width="70" height="50">
</div>
</div>
<div id="mbbs_2" style="display:none;">
<div style="height:88px;">
<img src="{{$template}}/img/main/a2.jpg" width="70" height="50">
</div>
</div>
</div>
요렇게 짜놨는데.... 어디를 수정해서 한줄에 쭉나오게 가능할까요;;;;??
도움좀 주십시오!!
더운데 모두들 힘내시구요!
답변 2
css로 수정해주시면되요
float:left, float:right
left,right로 붙인다는거에요.
<style>
.mainMenu{float:left;}
</style>
<div class="menu01 mainMenu">메뉴1번</div>
<div class="menu02 mainMenu">메뉴2번</div>
답변 감사합니다!
저런경우 메뉴 작업은 div 보다는 ul로 작업하는게 좋습니다.
ul{ list-style:none }
ul il {float:left; padding:5px 10px; }
<ul>
<li>공지사항</li>
<li>보도자료</li>
<li>더보기</li>
</ul>
오오 참고하도록 하겠습니다!
