단위심화 강의 중 질문 있습니다.
안녕하세요 단위심화 강의 중 두 번째 실습 과정 중,
두 번째 줄에 사진이 3장밖에 안 들어가는데 왜 그런건가요..??
flex-wrap: wrap; 까지 적용시켰는데 되지 않네요.
보시는 바와 같이 윗줄은 4장이 출력 되는데, 밑줄은 3장만 출력이 됩니다.
제가 작성한 코드는
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06-02-calc2</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
</ul>
</div>
<div class="contents">
<div class="item">상품</div>
<div class="item">상품</div>
<div class="item">상품</div>
<div class="item">상품</div>
<div class="item">상품</div>
<div class="item">상품</div>
<div class="item">상품</div>
</div>
</div>
</body>
</html>css
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.sidebar {
width: 170px;
background-color: orange;
padding: 5px 15px;
}
.sidebar ul {
width: 100%;
padding: 0;
}
.sidebar ul li {
list-style: none;
padding: 5px 0;
color: #ffffff;
border-bottom: 1px dashed rgba(255,255,255,0.3); /* 메뉴 사이 구분선*/
}
.contents {
width: calc(100% - 170px);
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
}
.item {
width: 24%;/
height: 180px;
background-image: url("../img/dochihello.jpg");
}Câu trả lời 1
1
안녕하세요 liltjay 님!
상품이 7개 밖에 없기때문에 아래줄에는 3개밖에 안들어 간 것 입니다!
상품의 갯수를 1개 더 추가해보시고, 답글 남겨주세요!
감사합니다.😊
background vs background-color
0
21
1
노션 자료위치
0
79
2
강의 수강 후 실습
0
324
1
강의 내용과 같은 작업을 쉽게 도와주는 라이브러리 같은 것도 있나요?
1
309
1
강의학습시 작성한 코드를 블로그에 올려도 될까요?
0
392
2
안녕하세요 이미지 관련해서 질문이 있습니다,
0
363
1
codepen질문입니다.
0
302
2
transition질문있습니다~
0
346
1
섹션 5. position 강의 중 absolute와 relative의 사용법에 대한 질문 있습니다!
0
223
1
노션 학습 링크
0
370
1
반응형 실습
0
282
2
@media 미디어 쿼리 적용 안되는 이유
0
1260
1
35분 강의 내용중 :after 사용관련
0
268
2
코드캠프 로드맵 이후 질문사항
0
325
1
diary-date 부분 질문
0
312
1
transform 3번째 강의 질문
0
311
1
강의자료
0
468
1
학습자료 요청건
0
394
1
레이아웃 질문드려요~
0
380
1
vscode 새로운 폴더 불러오기
0
385
1
grid속성 6:36에 나오는 것.
0
313
1
left:calc(100% - 100px) 질문드립니다.
0
729
1
텍스트박스안에서 padding-bottom 이 이렇습니다
0
395
2
영상 중간 생략
0
314
1