배너 이미지 가로 정렬
본문
https://sir.kr/g5_plugin/7724?sfl=wr_subject%7C%7Cwr_content&stx=%EB%B0%B0%EB%84%88
안녕하세요 위 2가지 참고하여
사이트에 배너를 등록하였습니다.
근데 배너 출력이 세로로만 됩니다.
배너를 가로로 출력하고 싶은경우 어떻게 해야할까요 ㅜㅜ
mainbanner.skin.php 파일에서 이것저것 만져보아도 안됩니다.
banner.css 에서 수정해도 반응이 없습니다. ㅜㅜㅜ
세로로만 출력되는걸 가로로 출력되면서 개수를 정해서
만약 4개이상은 그 아래로 출력이 되도록 하고싶습니다.
도와주세요 ㅜㅜㅜ
답변 3
위의 내용만으로는 일일이 테스트를 해볼수 없으므로
작업중이신 소스코드를 올려주시면 많은 답변을 받으실 수 있으실거라 생각합니다.
출력코드를 올렸는데 확인한번 해주실 수 있으실까요 ㅜㅜ
<?php
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.G5_SKIN_URL.'/style.css">', 0);
add_javascript('<script src="'.G5_JS_URL.'/jquery.bxslider.js"></script>', 0);
?>
<?php
$max_width = $max_height = 0;
$bn_first_class = ' class="bn_first"';
$bn_slide_btn = '';
$bn_sl = ' class="bn_sl"';
$main_banners = array();
for ($i=0; $row=sql_fetch_array($result); $i++)
{
$main_banners[] = $row;
if ($i==0) echo '<div id="main_bn">'.PHP_EOL.'<ul class="slide-wrap">'.PHP_EOL;
//print_r2($row);
// 테두리 있는지
$bn_border = ($row['bn_border']) ? ' class="sbn_border"' : '';;
// 새창 띄우기인지
$bn_new_win = ($row['bn_new_win']) ? ' target="_blank"' : '';
$bimg = G5_DATA_PATH.'/banner/'.$row['bn_id'];
if (file_exists($bimg))
{
$banner = '';
$size = getimagesize($bimg);
if($size[2] < 1 || $size[2] > 16)
continue;
if($max_width < $size[0])
$max_width = $size[0];
if($max_height < $size[1])
$max_height = $size[1];
echo '<li'.$bn_first_class.'>'.PHP_EOL;
if ($row['bn_url'][0] == '#')
$banner .= '<a href="'.$row['bn_url'].'">';
else if ($row['bn_url'] && $row['bn_url'] != 'http://') {
$banner .= '<a href="'.$row['bn_url'].'"'.$bn_new_win.'>';
}
echo $banner.'<img src="'.G5_DATA_URL.'/banner/'.$row['bn_id'].'" width="'.$size[0].'" alt="'.get_text($row['bn_alt']).'"'.$bn_border.'order by rand()>';
if($banner)
echo '</a>'.PHP_EOL;
echo '</li>'.PHP_EOL;
}
}
출력하는 코드는 이렇습니다.
CSS로 다음과 같이 해 볼 수 있을 것 같습니다.
/* 가로로 배치할 Flexbox 컨테이너 */
#main_bn {
display: flex;
flex-wrap: wrap; /* 요소들을 한 줄에 배치하되 넘치면 다음 줄로 개행 */
list-style: none;
padding: 0;
margin: 0;
}
/* 각 배너의 스타일 설정 */
#main_bn li {
flex: 0 0 25%; /* 각 배너를 25%의 너비로 설정 (4개가 한 줄에 배치됨) */
padding: 10px;
}
/* 필요한 경우 추가적으로 스타일을 설정해주세요 */
이렇게 하면 한줄에 4개의 배너가 출력되면서 5번째 배너 부터는 다음줄부터 생성이 될 것 같습니다.
설정해보겠습니다 감사합니다!!
그누보드 버전을 알려 주세요. 최근버전은 배너관리가 있는데..