최근글 스킨 여백 질문 드립니다.
본문
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;
이렇게 하니 양쪽 끝에도 보드값이 들어가니 여백이 생겨서요.
스킨 css
.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;
}
스킨 소스
<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>
답변 2
.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;
}
이런식으로 여백을 줄 수도있습니다.
우선 답변 감사합니다.
위에 소스를 넣으니 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로 조정하시거나 하셔야할것같아요
여백 넣으면 넓이가 줄어드는것은 당연합니다.
