-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
컨텐츠 배열방향이 세로로 나오네요
21.02.04 18:41 작성 조회수 178
1
* {
margin: 0;
padding: 0;
}
#header {
height: 64px;
border-bottom: 1px solid gray;
display: flex;
justify-content: center;
}
#body {
height: 100%;
width: 1024px;
margin: 0 auto;
padding-bottom: 24px;
}
#footer {
height: 200px;
background-color: red;
}
#banner {
height: 300px;
background-color: yellow;
}
#header-area {
width: 1024px;
height: 100%;
display: flex;
align-items: center;
}
#header-area > img {
width: 128px;
height: 36px;
}
#banner > img {
width: 100%;
}
#body > h1 {
margin-top: 16px;
}
#product-list {
display: flex;
flex-wrap: wrap;
}
.product-card {
width: 180px;
height: 300px;
margin-right: 12px;
margin-bottom: 12px;
border: 1px solid black;
border-radius: 12px;
}
.product-img {
height: 210px;
width: 100%;
}
.product-contents {
display: flex;
flex-direction: column;
padding: 8px;
}
.product-name {
font-size: 14px;
}
.product-price {
font-size: 16px;
font-weight: 600;
margin-top: 4px;
}
.product-seller {
display: flex;
align-items: center;
margin-top: 12px;
}
.product-avator {
width: 24px;
}
아무리 소스를 봐도 동일하게 해서 원인을 찾을수가 없어요
혹시 원인을 알수있을까요??
코드도 같이 올려드립니다.
답변을 작성해보세요.
0
0
그랩
지식공유자2021.02.04
안녕하세요~!
개발자도구에서 id가 product-list인 div의 너비를 한 번 확인해주실 수 있을까요?
개발자도구를 켜고 저 마우스가 있는 아이콘을 누르고 product-card 옆 부분을 눌러서 product-list div의 너비를 확인해주세요. 그리고 flex-wrap이 잘 적용되었는지 styles에서도 확인해주세요!
답변 2