CSS 정렬 소스 좀 봐주세요.
본문
전문가님들의 도움을 요청합니다.
저희 자회사 사이트를 참고하고 있는데, 정렬이 생각처럼 안되네요.
문제는 그림의 사진들 크기가 다 제각각 이라서 정렬이 안됩니다.
뭐가 문제인지 좀 봐주실수 있을까요?
링크 : https://www.kew-ltd.co.jp/en/products/detail/01192/
맨 하단부분인데,
여기서 참고한 css는
contents .column2 .frame {
float: none;
width: auto;
margin: 20px 0 0;
}
.Accessory {
width: 700px;
display: block;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
margin: 0 0 20px;
}
.Accessory_row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
margin: 0;
}
.Accessory_item {
width: 50%;
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
display: block;
border-width: 0 1px 1px 0;
}
.Accessory a {
padding: 5px;
}
.Accessory dl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: -webkit-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.Accessory dt {
width: 50px;
height: 50px;
line-height: 50px;
margin-right: 5px;
}
.Accessory dt img {
max-height: 100%;
max-width: 100%;
}
.Accessory .AccessoryLink {
text-align: left;
padding-left: 8px;
text-indent: -8px;
}
.Accessory .AccessoryLink:before {
margin-right: 2px;
}
출력하면,
이렇게만 나오네요.
며칠을 헤메고 있는데, 넘 힘드네요.
진심어린 조언 부탁드립니다.
출력 링크는 여깁니다. http://sejin.idkorea.biz/bbs/board.php?bo_table=0109&wr_id=1
답변 3
일단 이 부분이
.Accessory_item {
width: 50%;
너비가 20% 되어야 하고 dl 에는 플렉스 왜 주신걸까요 삭제해보세요.
참고로 올려주신 본사소스랑 이미지 크기가 다르게 잡혀있네요
height값 비교해서 수정해보세요
항상 이미지는 박스 안에서 크기가 고정되게 가로값이든 세로값이든 고정으로 주거나, 백그라운드 처리하여 최대한 사이즈를 맞추는 게 좋습니다