안녕하세요.
현재 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 정도 간격을 주면서 우측 여백없이 정렬하는 방법이 있을지 질문드립니다.
