XETOWN

질문/답변

웹에 관련된 질문과 답변을 나눌 수 있습니다.
질문/답변
2016.09.17 17:13

위젯 박스간 간격 문의드립니다.

조회 수 21 댓글 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 정도 간격을 주면서 우측 여백없이 정렬하는 방법이 있을지 질문드립니다. 

 

  • 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
번호 분류 제목 날짜
공지 질문/답변 답변을 확실히 받기위한 질문자 지침서 20 2015.12.31
2828 질문/답변 저사양 vps에서의 xe.캐시 2 2016.09.17
2827 질문/답변 리캡챠 애드온이 익스플로러에서 잘 작동하나요? 3 2016.09.17
2826 질문/답변 (구) 네이버 오픈 API 호출 종료에 따른 마이그레이션 안내 2 2016.09.17
2825 질문/답변 게시글 조회 act값이 뭔지 모르겠어요. 9 2016.09.17
2824 질문/답변 최근 로그인 날짜가 갱신되지 않음 2 2016.09.17
» 질문/답변 위젯 박스간 간격 문의드립니다. 2 file 2016.09.17
2822 질문/답변 모바일 / ck에디터 / ck editor / 붙여넣기 / 문제 1 file 2016.09.17
2821 질문/답변 라이믹스 캐시 재생성 과정에 뭔가 문제가 있는거 같은데... 뭔지 모르겠네요 15 2016.09.17
2820 질문/답변 cafe24호스팅 받으시는분들 FTP나 SSH접속 테스트좀 부탁드립니다. 2 2016.09.17
2819 질문/답변 varnish 캐시 서버를 적용한 경우에는 방문자의 실제 IP가 기록되지 않나요? 1 2016.09.17
2818 질문/답변 DNS_PROBE_FINISHED_NXDOMAIN -에러 겪어보신 분 계실까요? 2 2016.09.17
2817 질문/답변 라이믹스 서버 이전 중 문제가 발생했습니다 5 2016.09.16
2816 질문/답변 구글 검색엔진에 상위노출 방법 궁금합니다. 2016.09.16
2815 질문/답변 라이믹스의 JS 통합기능 질문드립니다 4 2016.09.16
2814 질문/답변 클라우드 호스팅 이용시 머 이용할수잇나요>? 3 2016.09.16
2813 질문/답변 로그인이 안되는 현상 + 캐시 재생성이 안되는 현상 질문드립니다 11 2016.09.16
2812 질문/답변 다음 팁이 라이믹스에는 적용되어 있나요? 7 2016.09.16
2811 질문/답변 클플 차단 질문 6 2016.09.15
2810 질문/답변 댓글 ACT 값이 뭔가요? 3 2016.09.15
2809 질문/답변 웹에서 만약 28포인트라면 모바일에서는 더 축소해서 보여야하는데. 1 2016.09.15
Board Pagination Prev 1 ... 24 25 26 27 28 29 30 31 32 33 ... 170 Next
/ 170
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...