global_responsive_a_shop_pc.css 를 수정해주세요.

 

Line. 53

 

/* 상품 리스트 */
.glores-A-goods-list {
    ul {
        li {
            width:300px; padding-top:20px; padding-bottom:20px; padding-left:0px; padding-right:0px;
            > div {
                span {}
            }
        }
      .clear2n {}
        .clear3n {clear:none;}
        .clear4n {clear:none;}
    }
}

 

 

-->

 

 

/* 상품 리스트 */
.glores-A-goods-list {
  overflow:hidden;
    ul {
      margin:0 -20px;
        li {
            width:33.33%; padding-top:20px; padding-bottom:20px; padding-left:20px; padding-right:20px;
            > div {
                span {}
            }
        }
        .clear2n {clear:none;}
        .clear3n {clear:both;}
        .clear4n {clear:none;}
    }
}

 

 

@ 설명

'저 각각의 리스트 각개 클래스가 주어지는데, 클래스가 중복적용이 되어 순차적으로 클래스를 적용해도 중복되는 거 땜에 밀리거나 제대로 적용이 힘듭니다.'

- clear2n, clear3n, clear4n 의 경우.. 한줄에 출력되는 부분 제어를 위해서 있는 class 입니다. 각각 컨트롤 하려면 class 명을 새로 추가해야합니다.

 

 

첨부하신 이미지 기준으로 좌우 끝까지 이미지가 출력되는것으로 판단하여 설명드립니다.

 

- 균등한 출력을 위해서 가로 크기를 수정합니다.

width:33.33%;

 

- 여백을 추가합니다.

padding-left:20px; padding-right:20px;

 

- 좌우가 붙도록 하기 위해서 부모항목에 좌우 여백을 늘려줍니다.

margin:0 -20px;

 

- 부모항목이 화면을 벗어나더라도 문제가 생기지 않도록, 상위항목에 숨김효과를 추가합니다.

overflow:hidden;

 

- 이미지나 내용이 바뀌어도, 3개 단위로 정상적으로 줄바꿈이 되도록 수정 합니다.

.clear2n {clear:none;}

.clear3n {clear:both;}