XETOWN

질문/답변

웹에 관련된 질문과 답변을 나눌 수 있습니다.
조회 수 31 댓글 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
번호 제목 글쓴이 날짜
공지 답변을 확실히 받기위한 질문자 지침서 4 람보 2017.05.04
2835 vultr VPS 2GB램, 2cpu로 어느정도 동접까지 감당할 수 있을까요? 3 고라자 2016.09.19
2834 가비아 퍼스트몰 과 자사 홈페이지 기능 연동문의.... 1 복실이 2016.09.19
2833 호스팅 종류를 어떤것을 써야 할지 모르겠습니다. 3 비공개 2016.09.19
2832 XE는 기본 폰트 크기가 왜 13px > 12px 한번에 변경방법이 있나요? 2 고수군 2016.09.19
2831 htaccess 나 아파치 단 설정을 통한 특정 국가에서의 접속 차단 1 고라자 2016.09.19
2830 json 데이터 불러올 때 list_count 제어 문제 12 윤삼 2016.09.18
2829 ERROR CODE DNS_PROBE_FINISHED_NXDOMAIN --문제에 대해 질문드립니다. 4 홍수영 2016.09.18
2828 모바일로 게시판 글쓰기나 글열람시 오류가 뜹니다. (수정) file 마끼아토 2016.09.18
2827 또 500에러가 떴다고 하는데... 원인을 모르겠네요 18 file 기븐 2016.09.18
2826 정회원 신청은 어디서 하나요? 2 구름이 2016.09.18
2825 라이믹스 최신 develop브랜치 적용 후 4 고라자 2016.09.18
2824 저사양 vps에서의 xe.캐시 2 고라자 2016.09.17
2823 리캡챠 애드온이 익스플로러에서 잘 작동하나요? 3 다이오니 2016.09.17
2822 (구) 네이버 오픈 API 호출 종료에 따른 마이그레이션 안내 2 쭈박이 2016.09.17
2821 게시글 조회 act값이 뭔지 모르겠어요. 9 다이오니 2016.09.17
2820 최근 로그인 날짜가 갱신되지 않음 2 디지털리스트 2016.09.17
» 위젯 박스간 간격 문의드립니다. 2 file Sraty 2016.09.17
2818 모바일 / ck에디터 / ck editor / 붙여넣기 / 문제 1 file 매미맴맴 2016.09.17
2817 라이믹스 캐시 재생성 과정에 뭔가 문제가 있는거 같은데... 뭔지 모르겠네요 15 기븐 2016.09.17
2816 cafe24호스팅 받으시는분들 FTP나 SSH접속 테스트좀 부탁드립니다. 2 람보 2016.09.17
Board Pagination Prev 1 ... 108 109 110 111 112 113 114 115 116 117 ... 254 Next
/ 254
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...