최신글 썸네일 이미지 css관련 질문좀 드리겠습니다! 채택완료
안녕하세요 최신글 썸네일에서 해당 이미지처럼
4번째 글 밑으로 5번째 글이 들어와버립니다
4/4씩 정렬이 되야하는데 남는공간으로 들어와버려서 이사항을 해결하고자 질문드립니다

해당이미지를 정렬할수 있는 css를 어디서 어떻게 손을 보면 좋을까요? 코드는 아래와 같습니다.
.pic_lt_gr ul:after {display:block;visibility:hidden;clear:both;content:""}
.pic_lt_gr ul{padding:20px 15px;}
.pic_lt_gr li{float:left;max-width:23%;margin:0 1%;min-height:160px;}
.pic_lt_gr li .lt_img{margin:5px 0;display:block}
.pic_lt_gr li .lt_img img{width:auto;height:100%;}
.pic_lt_gr li a:hover{color:#a22121}
.pic_lt_gr li .fa-heart{color:#ff0000;}
.pic_lt_gr li .fa-lock{display: inline-block;line-height: 14px;width: 16px;font-size: 0.833em;color: #4f818c;background: #cbe3e8;text-align: center;border-radius: 2px;font-size: 12px;border:1px solid #a2c6ce}
.pic_lt_gr li .new_icon{display:inline-block;width: 16px;line-height:16px ;font-size:0.833em;color:#ffff00;background:#6db142;text-align:center;border-radius: 2px;}
.pic_lt_gr li .hot_icon{display:inline-block;width: 16px;line-height:16px ;font-size:0.833em;color:#fff;background:#e52955;text-align:center;border-radius: 2px;}
.pic_lt_gr li .fa-caret-right{color:#bbb}
.pic_lt_gr .lt_cmt{background:#5c85c1;color:#fff; font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;white-space: nowrap;
-webkit-box-shadow: inset 0 2px 5px rgba(255,255,255,0.4);
-moz-box-shadow: inset 0 2px 5px rgba(255,255,255,0.4);
box-shadow: inset 0 2px 5px rgba(255,255,255,0.4);}
.pic_lt_gr .lt_date{display:block;margin-top:5px;color: #888;}
.pic_lt_gr .gall_info{padding:5px 0;color:#888}
.pic_lt_gr .gall_info .gall_date{float:right}
.gall_info{display:none;}
상세한 답변 미리 감사드립니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
6년 전
기본첨부되어있는 gallery 스킨을 기준으로 조금 말씀드리면 list.skin.,php에
</p>
<p><ul id="gall_ul" class="gall_row">
<?php for ($i=0; $i<count($list); $i++) {</p>
<p> $classes = array();
$classes[] = 'gall_li';
$classes[] = 'col-gn-'.$bo_gallery_cols;</p>
<p> if( $i && ($i % $bo_gallery_cols == 0) ){
$classes[] = 'box_clear';
}</p>
<p> if( $wr_id && $wr_id == $list[$i]['wr_id'] ){
$classes[] = 'gall_now';
}
?>
<li class="<?php echo implode(' ', $classes); ?>">
<div class="gall_box">
<div class="gall_chk">
<?php if ($is_checkbox) { ?>
<label for="chk_wr_id_<?php echo $i ?>" class="sound_only"><?php echo $list[$i]['subject'] ?></label>
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">
<?php } ?>
<span class="sound_only">
<?php
if ($wr_id == $list[$i]['wr_id'])
echo "<span class=\"bo_current\">열람중</span>";
else
echo $list[$i]['num'];
?>
</span>
</div>
<div class="gall_con">
<div class="gall_img">
<a href="<?php echo $list[$i]['href'] ?>">
<?php
if ($list[$i]['is_notice']) { // 공지사항 ?>
<span class="is_notice">공지</span>
<?php } else {
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);</p>
<p> if($thumb['src']) {
$img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" >';
} else {
$img_content = '<span class="no_image">no image</span>';
}</p>
<p> echo $img_content;
}
?>
</a>
</div>
<div class="gall_text_href">
<?php
// echo $list[$i]['icon_reply']; 갤러리는 reply 를 사용 안 할 것 같습니다. - 지운아빠 2013-03-04
if ($is_category && $list[$i]['ca_name']) {
?>
<a href="<?php echo $list[$i]['ca_name_href'] ?>" class="bo_cate_link"><?php echo $list[$i]['ca_name'] ?></a>
<?php } ?>
<a href="<?php echo $list[$i]['href'] ?>" class="bo_tit">
<?php echo $list[$i]['subject'] ?>
<?php if ($list[$i]['comment_cnt']) { ?><span class="sound_only">댓글</span><span class="cnt_cmt">+ <?php echo $list[$i]['wr_comment']; ?></span><span class="sound_only">개</span><?php } ?>
<?php
// if ($list[$i]['file']['count']) { echo '<'.$list[$i]['file']['count'].'>'; }</p>
<p> if (isset($list[$i]['icon_new'])) echo rtrim($list[$i]['icon_new']);
if (isset($list[$i]['icon_hot'])) echo rtrim($list[$i]['icon_hot']);
//if (isset($list[$i]['icon_file'])) echo rtrim($list[$i]['icon_file']);
//if (isset($list[$i]['icon_link'])) echo rtrim($list[$i]['icon_link']);
if (isset($list[$i]['icon_secret'])) echo rtrim($list[$i]['icon_secret']);
?>
</a>
</div>
<div class="gall_name">
<span class="sound_only">작성자 </span><span class="profile_img"><?php echo $list[$i]['name'] ?></span>
</div>
<div class="gall_info">
<span class="sound_only">조회 </span><i class="fa fa-eye" aria-hidden="true"></i> <?php echo $list[$i]['wr_hit'] ?>
<?php if ($is_good) { ?><span class="sound_only">추천</span><strong><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <?php echo $list[$i]['wr_good'] ?></strong><?php } ?>
<?php if ($is_nogood) { ?><span class="sound_only">비추천</span><strong><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> <?php echo $list[$i]['wr_nogood'] ?></strong><?php } ?>
<span class="gall_date"><span class="sound_only">작성일 </span><i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo $list[$i]['datetime2'] ?></span>
</div>
</div>
</div>
</li></p>
<p> <!--추가된부분--></p>
<p> <?if($i%4==0){?></p>
<p> <div style="clear:both;"></div></p>
<p> <!-- clear:both로 안되시면 다른 br이나 내려주는 코드를 추가해주시면될거같아요! --></p>
<p> <?}?></p>
<p> <!--추가된부분-->
<?php } ?>
<?php if (count($list) == 0) { echo "<li class=\"empty_list\">게시물이 없습니다.</li>"; } ?>
</ul></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 2개
n
6년 전
답변감사합니다 고정값을 해봤습니다만 gif파일은 원본에 맞게 썸네일을 어느정도 크게 불러오는거 같더라구요 고정 값을하게되면 일반 jpg나 png부분이 너무 남게 되버려서.. 영역이 남아도 못들어가게하는것만 찾으면 되는데 너무어렵네요..ㅠ
�
6년 전
php 를 할줄아시면 list를 불러올때 4번째마다 clear:both;나 br등을 를 넣어서 맞춰 줄 수는 있습니다.
댓글을 작성하려면 로그인이 필요합니다.
6년 전
css랑 이미지만 있지 해당 소스까진 없어서 정확히 알 수 없습니다만
.pic_li_gr li:nth-child(4n+1){clear:both;]
로 5번째의 li마다 clear처리를 해주셔야 할것 같네요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기
답변대기
답변대기
채택
채택
답변대기
답변대기
답변대기
채택