이미지가 4장씩 두줄로 나오게 하고 싶어요

이미지가 4장씩 두줄로 나오게 하고 싶어요

QA

이미지가 4장씩 두줄로 나오게 하고 싶어요

본문

어디를 어떻게 수정해야 할지 모르겠어요

 

--------------------------------------------------------------------------------------------------------

<?php if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>

<div class="sec section sec-tiles-3topimg1 white-">
    <style>
        .sec-tiles-3topimg1 { }
        .sec-tiles-3topimg1 .header { margin-bottom:50px; }
        .sec-tiles-3topimg1 ul { display:flex; justify-content:space-between; }
        .sec-tiles-3topimg1 ul li { width:calc(33% - 55px); opacity:0; transform:translateY(200px); transition-duration:1s; }
        .sec-tiles-3topimg1.active ul li { opacity:1; transform:translateY(0); }

        .sec-tiles-3topimg1 ul li a { position:relative; display:block; padding-bottom:110%; color:#fff; background:none no-repeat center/cover; z-index:2; }
        .sec-tiles-3topimg1 ul li a:before,
        .sec-tiles-3topimg1 ul li a:after { content:""; position:absolute; left:0; top:0; right:0; bottom:0; z-index:-1; background:rgba(0,0,0,.2); transition-duration:400ms; }
        .sec-tiles-3topimg1 ul li a:after { opacity:0; }
        .sec-tiles-3topimg1 ul li a:hover:after { opacity:1; background:rgba(0,0,0,.4); }
        .sec-tiles-3topimg1 ul li a:hover { box-shadow:10px 10px 30px rgba(0,0,0,.3); }
        .sec-tiles-3topimg1 ul li a > div { position:absolute; left:30px; right:30px; bottom:45px; }
        .sec-tiles-3topimg1 ul li a .head { font-size:1.5rem; line-height:1.6; transition-duration:400ms; }
        .sec-tiles-3topimg1 ul li a .plus { width:30px; height:30px; opacity:0; transition-duration:200ms; }
        .sec-tiles-3topimg1 ul li a .plus:before,
        .sec-tiles-3topimg1 ul li a .plus:after { content:""; position:absolute; background:#fff; }
        .sec-tiles-3topimg1 ul li a .plus:before { width:100%; height:1px; top:50%; }
        .sec-tiles-3topimg1 ul li a .plus:after { width:1px; height:100%; left:50%; }
        .sec-tiles-3topimg1 ul li a:hover .head { bottom:90px; }
        .sec-tiles-3topimg1 ul li a:hover .plus { opacity:1; }

        @media (max-width: 1700px) {
            .sec-tiles-3topimg1 ul li { width:calc(33% - 5px); }
        }

        @media (max-width: 1200px) {
            .sec-tiles-3topimg1 ul li a > div { bottom:35px; }
            .sec-tiles-3topimg1 ul li a .head { font-size:1.25rem; }
            .sec-tiles-3topimg1 ul li a:hover .head { bottom:80px; }
        }

        @media (max-width: 1024px) {
            .sec-tiles-3topimg1 .header { margin-bottom:30px; }
            .sec-tiles-3topimg1 ul { flex-wrap:wrap; max-width:600px; margin:0 auto; }
            .sec-tiles-3topimg1 ul li { width:100%; margin:5px 0; transform:translate(50%, 0); transition-duration:600ms; }
            .sec-tiles-3topimg1.active ul li { transform:translate(0, 0); }

            .sec-tiles-3topimg1 ul li a { padding-bottom:30%; }
            .sec-tiles-3topimg1 ul li a > div { left:20px; right:20px; bottom:25px; }
            .sec-tiles-3topimg1 ul li a .plus { width:20px; height:20px; }
            .sec-tiles-3topimg1 ul li a:hover .head { bottom:55px; }
        }

        @media (max-width: 767px) {
            .sec-tiles-3topimg1 ul li a { padding-bottom:35%; }
            .sec-tiles-3topimg1 ul li a .head { font-size:1.125rem; }
        }
    </style>

    <div class="c">
        <div class="header">
            <div class="subhead">LEGAL WORK</div>
            <div class="head">의뢰인을 위한 전략적인 법률 솔루션을 제공합니다.</div>
        </div>

        <?php
        $arr = array(
            array('bg' => 'business6-sec4-img1.jpg', 'h' => '형사/성범죄/마약', 'href' => url_npage('work1') ),
            array('bg' => 'business6-sec4-img2.jpg', 'h' => '음주운전/교통사고', 'href' => url_board('work2') ),
            array('bg' => 'business6-sec4-img3.jpg', 'h' => '민사/손해배상', 'href' => url_npage('work3') ),
            array('bg' => 'business6-sec4-img4.jpg', 'h' => '이혼/상속', 'href' => url_npage('work4') ),
            array('bg' => 'business6-sec4-img5.jpg', 'h' => '행정/학교폭력', 'href' => url_board('work5') ),
            array('bg' => 'business6-sec4-img6.jpg', 'h' => '부동산/건설', 'href' => url_npage('work6') ),
            array('bg' => 'business6-sec4-img7.jpg', 'h' => '금융(PF)', 'href' => url_npage('work7') ),
            array('bg' => 'business6-sec4-img8.jpg', 'h' => '기업법무/자문', 'href' => url_npage('work8') ),
        );
        ?>

        <ul>
            <?php for ($i=0; $i<count($arr); $i++) {
                $item = $arr[$i];
                ?>
                <li class="scr-delay scr-fadeinup" style="transition-delay:<?php echo 0.3+($i+1)*0.2?>s">
                    <a class="a" href="<?php echo $item['href']?>" title="<?php echo $item['h']?>"  style="background-image:url('<?php echo G5_THEME_IMG_URL?>/<?php echo $item['bg']?>');">
                        <div class="head"><?php echo $item['h']?></div>
                        <div class="plus"></div>
                    </a>
                </li>
            <?php } ?>
        </ul>

    </div>

</div>

이 질문에 댓글 쓰기 :

답변 2

아래의 내용을 한번 참고해 보시겠어요..

 

 

.sec-tiles-3topimg1 {
    text-align: center;
}

.sec-tiles-3topimg1 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}

.sec-tiles-3topimg1 ul li {
    width: calc(25% - 10px);
    margin: 5px;
    box-sizing: border-box;
    list-style: none;
    opacity: 0;
    transform: translateY(200px);
    transition-duration: 1s;
}

.sec-tiles-3topimg1.active ul li {
    opacity: 1;
    transform: translateY(0);
}

.sec-tiles-3topimg1 ul li a {
    position: relative;
    display: block;
    padding-bottom: 100%;
    color: #fff;
    background: none no-repeat center/cover;
    z-index: 2;
}

.sec-tiles-3topimg1 ul li a:before,
.sec-tiles-3topimg1 ul li a:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: rgba(0, 0, 0, .2);
    transition-duration: 400ms;
}

.sec-tiles-3topimg1 ul li a:after {
    opacity: 0;
}

.sec-tiles-3topimg1 ul li a:hover:after {
    opacity: 1;
    background: rgba(0, 0, 0, .4);
}

.sec-tiles-3topimg1 ul li a:hover {
    box-shadow: 10px 10px 30px rgba(0, 0, 0, .3);
}

.sec-tiles-3topimg1 ul li a > div {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 45px;
}

.sec-tiles-3topimg1 ul li a .head {
    font-size: 1.5rem;
    line-height: 1.6;
    transition-duration: 400ms;
}

.sec-tiles-3topimg1 ul li a .plus {
    width: 30px;
    height: 30px;
    opacity: 0;
    transition-duration: 200ms;
}

.sec-tiles-3topimg1 ul li a .plus:before,
.sec-tiles-3topimg1 ul li a .plus:after {
    content: "";
    position: absolute;
    background: #fff;
}

.sec-tiles-3topimg1 ul li a .plus:before {
    width: 100%;
    height: 1px;
    top: 50%;
}

.sec-tiles-3topimg1 ul li a .plus:after {
    width: 1px;
    height: 100%;
    left: 50%;
}

.sec-tiles-3topimg1 ul li a:hover .head {
    bottom: 90px;
}

.sec-tiles-3topimg1 ul li a:hover .plus {
    opacity: 1;
}

@media (max-width: 1700px) {
    .sec-tiles-3topimg1 ul li {
        width: calc(25% - 10px);
    }
}

@media (max-width: 1200px) {
    .sec-tiles-3topimg1 ul li a > div {
        bottom: 35px;
    }

    .sec-tiles-3topimg1 ul li a .head {
        font-size: 1.25rem;
    }

    .sec-tiles-3topimg1 ul li a:hover .head {
        bottom: 80px;
    }
}

@media (max-width: 1024px) {
    .sec-tiles-3topimg1 .header {
        margin-bottom: 30px;
    }

    .sec-tiles-3topimg1 ul {
        flex-wrap: wrap;
        max-width: 600px;
        margin: 0 auto;
    }

    .sec-tiles-3topimg1 ul li {
        width: calc(50% - 10px);
        margin: 5px;
        transform: translate(50%, 0);
        transition-duration: 600ms;
    }

    .sec-tiles-3topimg1.active ul li {
        transform: translate(0, 0);
    }

    .sec-tiles-3topimg1 ul li a {
        padding-bottom: 50%;
    }

    .sec-tiles-3topimg1 ul li a > div {
        left: 20px;
        right: 20px;
        bottom: 25px;
    }

    .sec-tiles-3topimg1 ul li a .plus {
        width: 20px;
        height: 20px;
    }

    .sec-tiles-3topimg1 ul li a:hover .head {
        bottom: 55px;
    }
}

@media (max-width: 767px) {
    .sec-tiles-3topimg1 ul li a {
        padding-bottom: 70%;
    }

    .sec-tiles-3topimg1 ul li a .head {
        font-size: 1.125rem;
    }
}
 

.sec-tiles-3topimg1 ul li { width:calc(33% - 55px); ... }

해당 부분을 수정해보세요.

ex) width: calc(25% - 82.5px)
ex) -55px은 여백일 겁니다.

 

확인 후 잘 되시면 채택 한번 부탁드립니다^^

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

회원로그인

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