최신글 썸네일 이미지 css관련 질문좀 드리겠습니다!

최신글 썸네일 이미지 css관련 질문좀 드리겠습니다!

QA

최신글 썸네일 이미지 css관련 질문좀 드리겠습니다!

본문

안녕하세요 최신글 썸네일에서 해당 이미지처럼

 

4번째 글 밑으로 5번째 글이 들어와버립니다

 

4/4씩 정렬이 되야하는데 남는공간으로 들어와버려서 이사항을 해결하고자 질문드립니다

2108814594_1566537739.3336.png

 

해당이미지를 정렬할수 있는 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

기본첨부되어있는 gallery 스킨을 기준으로 조금 말씀드리면 list.skin.,php에

 


<ul id="gall_ul" class="gall_row">
        <?php for ($i=0; $i<count($list); $i++) {
            $classes = array();
            
            $classes[] = 'gall_li';
            $classes[] = 'col-gn-'.$bo_gallery_cols;
            if( $i && ($i % $bo_gallery_cols == 0) ){
                $classes[] = 'box_clear';
            }
            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);
                            if($thumb['src']) {
                                $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" >';
                            } else {
                                $img_content = '<span class="no_image">no image</span>';
                            }
                            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'].'>'; }
                            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>
        <!--추가된부분-->
        <?if($i%4==0){?>
        <div style="clear:both;"></div>
        <!-- clear:both로 안되시면 다른 br이나 내려주는 코드를 추가해주시면될거같아요! -->
        <?}?>
        <!--추가된부분-->
        <?php } ?>
        <?php if (count($list) == 0) { echo "<li class=\"empty_list\">게시물이 없습니다.</li>"; } ?>
    </ul>

 

 

css랑 이미지만 있지 해당 소스까진 없어서 정확히 알 수 없습니다만

.pic_li_gr li:nth-child(4n+1){clear:both;]

로 5번째의 li마다 clear처리를 해주셔야 할것 같네요

이미지 height값을 고정되게 하시면 일괄적으로 나올 것 같긴합니다만..

답변감사합니다 고정값을 해봤습니다만 gif파일은 원본에 맞게 썸네일을 어느정도 크게 불러오는거 같더라구요 고정 값을하게되면 일반 jpg나 png부분이 너무 남게 되버려서.. 영역이 남아도 못들어가게하는것만 찾으면 되는데 너무어렵네요..ㅠ

답변을 작성하시기 전에 로그인 해주세요.
전체 123,162 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT