CSS 정렬 소스 좀 봐주세요.

CSS 정렬 소스 좀 봐주세요.

QA

CSS 정렬 소스 좀 봐주세요.

본문

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

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

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

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

링크 : https://www.kew-ltd.co.jp/en/products/detail/01192/

맨 하단부분인데,

237439875_1604379888.4018.jpg

여기서 참고한 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;
    }
    

출력하면,

237439875_1604380142.1159.jpg

이렇게만 나오네요.

며칠을 헤메고 있는데, 넘 힘드네요.

진심어린 조언 부탁드립니다.

출력 링크는 여깁니다. http://sejin.idkorea.biz/bbs/board.php?bo_table=0109&wr_id=1

이 질문에 댓글 쓰기 :

답변 3

일단 이 부분이

.Accessory_item {
        width: 50%;

 

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

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

 

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

답변을 작성하시기 전에 로그인 해주세요.
전체 0 | RSS
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 질문이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT