목록으로

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

파르테노

프로필 보기 이 회원 글보기 이 회원의 댓글보기

5년 전 조회 2,888

답변 3

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

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

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

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

링크 : 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;
   }