테스트 사이트 - 개발 중인 베타 버전입니다

CSS 정렬 소스 좀 봐주세요. 채택완료

파르테노 5년 전 조회 2,768

전문가님들의 도움을 요청합니다.

저희 자회사 사이트를 참고하고 있는데, 정렬이 생각처럼 안되네요. 

문제는 그림의 사진들 크기가 다 제각각 이라서 정렬이 안됩니다. 

뭐가 문제인지 좀 봐주실수 있을까요?

링크 : https://www.kew-ltd.co.jp/en/products/detail/01192/">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">http://sejin.idkorea.biz/bbs/board.php?bo_table=0109&wr_id=1

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
퍼블블
5년 전

일단 이 부분이

.Accessory_item {
        width: 50%;

 

너비가 20% 되어야 하고 dl 에는 플렉스 왜 주신걸까요 삭제해보세요.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

파르테노
5년 전
감사합니다. 참고해서 수정했습니다.
이것저것 조금씩 수정했더니 완벽하진 않지만 어느정도는 된 것 같아요.
조언해주셔서 감사드려요.

댓글을 작성하려면 로그인이 필요합니다.

5년 전

항상 이미지는 박스 안에서 크기가 고정되게 가로값이든 세로값이든 고정으로 주거나, 백그라운드 처리하여 최대한 사이즈를 맞추는 게 좋습니다 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

참고로 올려주신 본사소스랑 이미지 크기가 다르게 잡혀있네요

 

height값 비교해서 수정해보세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

파르테노
5년 전
감사합니다. 참고해서 수정했습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인