배너 이미지 가로 정렬

배너 이미지 가로 정렬

QA

배너 이미지 가로 정렬

답변 3

본문

https://sir.kr/g5_skin/29124

 

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번째 배너 부터는 다음줄부터 생성이 될 것 같습니다.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 45
© SIRSOFT
현재 페이지 제일 처음으로