-1
나는 이모, 모바일 치료사를위한 웹 사이트를 만들고 있습니다. 현재 내 문제는 내가 치료 섹션에서 이미지를 겹쳐서 멈추게 할 수 없다는 것입니다. 누군가 나를 도울 수 있습니까? 너비가 250 %이고 높이가 180 %가되도록 크기를 조정했습니다. 나는 플렉스 컨테이너를 사용할 때 이것과 같이 겹칠 것이라고는 예상하지 못했습니다. 이게 정상인가?플렉스 박스 컨테이너가 범람하는 것을 어떻게 멈추게합니까?
스택 오버플로가 그래서 여기에 너무 적은 단어 여기 나에게 내 모든 코드를 입력하자 CodePen 내 작업 코드의 링크입니다 않을 것이다 : https://codepen.io/wmufunde/pen/yPLZgG
/* =================================
Media Queries
==================================== */
@media (min-width: 769px) {
.main-header,
.main-nav,
.row {
display: flex;
}
.main-header {
flex-direction: column;
align-items:center;
}
.banner {
display: flex;
align-items: flex-end;
flex-direction:row;
flex: 2;
justify-content: space-between;
}
.col {
flex: 1;
flex-shrink: 0;
}
}
@media (min-width: 1025px) {
.main-header {
flex-direction: row;
justify-content: space-between;
}
.primary {
flex: 2;
}
}<!DOCTYPE html>
<html>
<head>
\t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t <title>Best City Guide</title>
\t <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
\t <link rel="stylesheet" href="css/style.css">
\t <link rel="stylesheet" href="css/flexbox.css">
</head>
<body>
\t
\t <header class="main-header">
\t \t <h1 class="name"><a href="#">Best City Guide</a></h1>
\t \t <ul class="main-nav">
\t \t \t <li><a href="#">ice cream</a></li>
\t \t \t <li><a href="#">donuts</a></li>
\t \t \t <li><a href="#">tea</a></li>
\t \t \t <li><a href="#">coffee</a></li>
\t \t </ul>
\t </header><!--/.main-header-->
\t <div class="banner">
\t <img class="logo" src="img/white-lilly.png" alt="lilly">
\t \t
\t \t <h1 class="headline">Simply Divine</h1>
\t \t <br>
<!-- \t \t <span class="tagline">Feel Good, Look Good.</span>-->
\t </div><!--/.banner-->
\t
\t
\t <div class = "my-row">
\t <div class = "massage">
<!-- \t <img src ="img/massage1.jpg" alt="massage">-->
\t </div>
\t </div>
\t
\t <section class ="treatments">
\t <div class="row"> \t \t
\t \t <div class="col">
\t \t \t <img src ="img/manicure.jpg">
\t \t </div><!--/.primary-->
\t \t
\t \t <div class="col">
\t \t \t <img src ="img/pedicure.jpg">
\t \t </div><!--/.secondary-->
\t \t
\t \t <div class="col">
\t \t <img src = "img/massage2.jpg">
\t \t </div>
\t \t
\t </div>
\t
\t <div class ="row">
\t <div class = "col">
\t <img src = "img/indian-head-massage.jpg">
\t </div>
\t
\t <div class = "col">
\t <img src = "img/wrap-massage.jpg">
\t </div>
\t
\t <div class = "col">
\t <img src = "img/facial.jpg">
\t </div>
\t </div>
\t </section>
\t
\t <section class ="treatments">
\t <div class="row"> \t \t
\t \t <div class="primary col">
\t \t \t
\t \t </div><!--/.primary-->
\t \t
\t \t <div class="secondary col">
\t \t \t
\t \t </div><!--/.secondary-->
\t \t
\t \t <div class="third col"></div>
\t </div>
\t </section>
\t
\t
\t <footer class="main-footer">
\t \t <span>©2015 Residents of The Best City Ever.</span>
\t </footer>
\t
</body>
</html>
는 최소 코드를 좁힐 더 나은 질문을, 아무도 당신에 대한 – Flying
괜찮아요 그 요구 않습니다 알아낼 시도에서 코드의 전체 무리를 조사 없습니다. 팁 주셔서 감사합니다. 문제는 flexbox.css 파일에 있다고 생각합니다. –
외부 링크가 아닌 질문 자체 내에서 문제를 재현하는 _minimal_ 작업 코드 스 니펫을 제공해야합니다. 링크가 끊어지면이 질문의 가치도 미래 사용자에게 있습니다. – LGSon