XETOWN

질문/답변

웹에 관련된 질문과 답변을 나눌 수 있습니다.
조회 수 22 댓글 2

asdsadsa.png

 

 

안녕하세요.

 

현재 proto 컨텐츠 위젯의 갤러리형을 가지고 조금씩 변형하고 있습니다.

원래는 margin:0 으로 서로 붙어있는게 원본인데, 이 게시물 박스 사이에 간격을 주려하고 있습니다.

 

/* gallery */
.gall_wrapper {padding:0 16px; box-sizing:border-box}
.mtf_gallery {width:100%; height:100%; padding:0; margin:0}
.mtf_g_li {float:left; width:100%; margin:0 9px 0 0}

.mtf_g_li1 {width:100%}
.mtf_g_li2 {width:50%}
.mtf_g_li3 {width:33.3333%}
.mtf_g_li4 {width:24%;}
.mtf_g_li5 {width:20%}
.mtf_g_li6 {width:16.66667%}
.mtf_g_li7 {width:14.2857143%}
.mtf_g_li8 {width:12.5%}
.mtf_g_li9 {width:11.11111%}
.mtf_g_li10 {width:10%}

.m_r_w{box-sizing:border-box}
.margin_r_n .m_r_w {padding:0}
.m_r_w {padding:0; margin:0; position:relative}
.m_r_w img {width:100%; float:left}
.m_r_w > a {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.05)}
.m_r_w > a:hover {background:rgba(0,0,0,0.1)}
.m_r_w > a > div {width:100%; height:100%; font-size:12px; position:relative; color:#fff}
.m_r_w div.grd_tt {width:100%; height:50%; bottom:0; padding:0 8px; background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.45) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.45) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}
.grd_tt > span {color:#fff; font-size:16px; line-height:initial; bottom:15px;}
.m_r_w div.br_title {padding:2px 8px; top:8px; left:8px; background-color: rgba(0,0,0,0.2)}
.m_r_w div.meta {right:8px; top:8px}
.m_r_w div.meta i {font-size:14px; vertical-align:-3px; margin-right:2px; color:#fff}

 

위가 해당 부분의 CSS 입니다.

 

현재 한 줄에 4개 게시물을 배열하고 있다보니. 여기에 margin:0 9px 0 0 값으로 수정하면 4번째 게시물이 아래줄로 내려갑니다. 그렇다보니 .mtf_g_li4 {width:25%;} 값에서 25%를 24% 로 변경하였으나, 사진처럼 우측 여백이 생기네요.

 

야매로 하다보니 다른 분들걸 보고 따라해봐도 어렵습니다. 현재 위젯을 줄바꿈없이 한줄에 10px 정도 간격을 주면서 우측 여백없이 정렬하는 방법이 있을지 질문드립니다. 

 

Atachment
첨부 1
  • profile
    윤삼 2016.09.17 18:21:54
    last-child나 last-of-type을 이용해서 오른쪽 margin값을 0으로 해보세요.
  • profile
    Sraty 2016.09.17 19:36:24
    윤삼님께 매번 배웁니다. 감사합니다 last-child 적용해서 원하는대로 처리했습니다..

List of Articles
번호 제목 글쓴이 날짜
공지 답변을 확실히 받기위한 질문자 지침서 21 람보 2015.12.31
2823 게시글 조회 act값이 뭔지 모르겠어요. 9 다이오니 2016.09.17
2822 최근 로그인 날짜가 갱신되지 않음 2 디지털리스트 2016.09.17
» 위젯 박스간 간격 문의드립니다. 2 file Sraty 2016.09.17
2820 모바일 / ck에디터 / ck editor / 붙여넣기 / 문제 1 file 매미맴맴 2016.09.17
2819 라이믹스 캐시 재생성 과정에 뭔가 문제가 있는거 같은데... 뭔지 모르겠네요 15 기븐 2016.09.17
2818 cafe24호스팅 받으시는분들 FTP나 SSH접속 테스트좀 부탁드립니다. 2 람보 2016.09.17
2817 varnish 캐시 서버를 적용한 경우에는 방문자의 실제 IP가 기록되지 않나요? 1 고라자 2016.09.17
2816 DNS_PROBE_FINISHED_NXDOMAIN -에러 겪어보신 분 계실까요? 2 틸트 2016.09.17
2815 라이믹스 서버 이전 중 문제가 발생했습니다 5 고라자 2016.09.16
2814 구글 검색엔진에 상위노출 방법 궁금합니다. 낙타 2016.09.16
2813 라이믹스의 JS 통합기능 질문드립니다 4 고라자 2016.09.16
2812 클라우드 호스팅 이용시 머 이용할수잇나요>? 3 언션 2016.09.16
2811 로그인이 안되는 현상 + 캐시 재생성이 안되는 현상 질문드립니다 11 기븐 2016.09.16
2810 다음 팁이 라이믹스에는 적용되어 있나요? 7 고라자 2016.09.16
2809 클플 차단 질문 6 데버 2016.09.15
2808 댓글 ACT 값이 뭔가요? 3 NEX 2016.09.15
2807 웹에서 만약 28포인트라면 모바일에서는 더 축소해서 보여야하는데. 1 질문쟁이 2016.09.15
2806 https -> http 리다이렉트 질문드립니다. 2 빵떡 2016.09.15
2805 XE질문 이라기보다 js질문입니다 6 스포 2016.09.15
2804 최근이미지... 위젯에서 막히내 ㅡㅡ 4 언션 2016.09.15
Board Pagination Prev 1 ... 45 46 47 48 49 50 51 52 53 54 ... 191 Next
/ 191
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...