• 카테고리

    질문 & 답변
  • 세부 분야

    자격증 (디자인)

  • 해결 여부

    미해결

세로2컬럼에 가로슬라이드 적용시 문제

22.03.04 10:46 작성 조회수 206

1

가로 슬라이드를 세로2컬럼 레이아웃에 적용 해보는 연습 중 질문드립니다.

아래 사진과 같이 이미지 3개중 일부가 위로 못올라오는데 도무지 이유를 모르겠습니다ㅠㅠ

분명 .slide > div 에 width: 2400px; 와 font-size: 0;을 주었는데 이미지가 두개는 올라오고 한개는 밑에 머물러있어요..

(저와 같은 문제로 질문하신분 글을 보았는데 내용인즉 .slide div에 width:2400px을 지정해도 가로로 나열이 안된 것처럼 보이는게 container에 overflow:hidden을 지정했기에 그걸 가리니 제대로 작동이 된다 라고 하셨더라구요 하지만 저는 .container에 overflow: hidden;을 가려도 변화가 없이 이미지 세개가 다올라오지 않습니다 ..)

css

 

body {

    margin: 0;

    color: #222;

    font-size: 15px;

}

a {

    text-decoration: none;

    color: #222;

}

.container {

    width: 1000px;

    overflow: hidden;

}

.container > div {

    float: left;

    box-sizing: border-box;

}

.left {

    width: 200px;

}

header {}

header > div {

    border: 1px solid #ddd;

}

.header-logo {

    height: 100px;

    text-align: center;

    line-height: 100px;

}

.navi {

    height: 400px;

}

 

 

.right {

    width: 800px;

}

 

/* Slide Animation */

.slide {

    position: relative;

    width: 800px;

    height: 300px;

}

.slide > div {

    width: 2400px;

    font-size: 0;

    position: absolute;

    top: 0;

    left: 0;

    animation: slide 10s linear infinite;

}

@keyframes slide {

    0% {

        left: 0;

    }

    30% {

        left: 0;

    }

    35% {

        left: -800px;

    }

    65% {

        left: -800px;

    }

    70% {

        left: -1600px;

    }

    95% {

        left: -1600px;

    }

    100% {

        left: 0;

    }

}

 

 

 

.items {

    overflow: hidden;

}

.items > div {

    border: 1px solid #ddd;

    float: left;

    box-sizing: border-box;

    height: 200px;

}

.news {

    width: 300px;

}

.gallery {

    width: 250px;

}

.shortcut {

    width: 250px;

    text-align: center;

    line-height: 200px;

}

 

 

footer {

    overflow: hidden;

}

footer > div {

    border: 1px solid #ddd;

    height: 100px;

    float: left;

    box-sizing: border-box;

}

 

.footer-logo {

    width: 200px;

}

.footer-content {

    width: 600px;

}

.footer-content > div {

    border: 1px solid #ddd;

    height: 50px;

}

 

 

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

 

    <div class="container">

        <div class="left">

            <header>

                <div class="header-logo">로고</div>

                <div class="navi">네비</div>

            </header>

        </div>

        <div class="right">

            <!-- Slide Animation -->

            <div class="slide">

                <div>

                    <a href="#none"><img src="images/slide-01.jpg" alt="image1"></a>

                    <a href="#none"><img src="images/slide-02.jpg" alt="image2"></a>

                    <a href="#none"><img src="images/slide-03.jpg" alt="image3"></a>

                </div>

            </div>

            <!-- Slide Animation -->

 

            <div class="items">

                <div class="news"></div>

                <div class="gallery"></div>

                <div class="shortcut">바로가기</div>

            </div>

            <footer>

                <div class="footer-logo"></div>

                <div class="footer-content">

                    <div></div>

                    <div></div>

                </div>

            </footer>

        </div>

    </div>

 

    <script src="script/jquery-1.12.4.js"></script>

    <script src="script/custom.js"></script>

    

</body>

</html>

 

답변 1

답변을 작성해보세요.

0

올리신 코드 복사해서 테스트 해봤는데 레이아웃이랑 슬라이드 문제 없이 잘 되는데요.

그런데 .slide에 overflow: hidden을 빼먹으셨네요.

/* Slide Animation */
.slide {
  position: relative;
  width: 800px;
  height: 300px;
  overflow: hidden;
}