SIR
목록으로

최근글 스킨 여백 질문 드립니다. 채택완료

다다조아해
프로필 보기이 회원 글보기이 회원의 댓글보기
 5년 전 조회 1,526
답변 2
목록

https://sir.kr/g5_skin/9338?sca=%EC%B5%9C%EC%8B%A0%EA%B8%80&sfl=wr_subject%7C%7Cwr_content&stx=%EB%B0%98%EC%9D%91%ED%98%95&page=4

최근 반응형 갤러리 carousel 소스를 찾다가 스킨을 다운 받았는데

지금은 사진 사이에 여백이 전혀 없습니다.

 

border: 1px solid #fff;
이 소스로 해서 테두리만 준거 같은데..

아래 이미지처럼 양쪽 끝은 여백이 없고

가운데 부분에서만 여백이 생기게 할려면 어찌 해야 할까요?

 

아니면 다른 롤링 스킨을 추천해 주셔도 좋고요
 

 

border: 10px solid #fff;

이렇게 하니 양쪽 끝에도 보드값이 들어가니 여백이 생겨서요.

2105932190_1595546338.9799.png

 

스킨 css

 

Copy 
.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    width: 200px;
    float: left;
    border: 1px solid #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.jcarousel img {
    display: block;
    max-width: 100%;
    height: auto !important;
}
 

 

 

스킨 소스

 

Copy 
<div class="">
    <div class="jcarousel">
    <ul>
<?php
for ($i=0; $i<count($list); $i++) {
    
    $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $width, $height);
    ?>
    <li><a href="<?php echo $list[$i]['href']?>"><img src="<?php echo $thumb['src']?>"></a>
    <?php echo cut_str($list[$i]['subject'],18) ?><br />
<em class="listCont"><?php echo cut_str(strip_tags($list[$i]['wr_content']),40," . . . ") ?></em>
    </li>
    
<?php
    }

if (count($list) == 0) { //게시물이 없을 때  ?>
        게시물이 없습니다.
<?php }  ?>

    </div>
    <p class="jcarousel-pagination"></p>
    
</div>
#그누보드5

답변 2개

채택된 답변
+20 포인트 
.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0px -10px;
    padding: 0;
}

 

.jcarousel li {
    width: 200px;
    float: left;
    border: 1px solid #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin : 0px 10px;
}

이런식으로 여백을 줄 수도있습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

우선 답변 감사합니다.
위에 소스를 넣으니 4개를 추출한다면 마지막 이미지 넓이가 10px 작게 보이는 현상이 있는거 같네요.

혹시 이 증상을 없게 할려면 어찌 해야 할까요?
.jcarousel li {
width: 200px;
float: left;
border: 1px solid #fff;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
저기 width 값을 210px로 조정하시거나 하셔야할것같아요
여백 넣으면 넓이가 줄어드는것은 당연합니다.

댓글을 작성하려면 로그인이 필요합니다.

flex 공부하시면 직접 하실 수 있을 듯.

https://homzzang.com/b/css?sca=flex

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고