핀터레스트 처럼 중앙정렬 하는 법 좀 알려주세요
본문
http://jisu.webnain.com/tip/index.html
핀터레스트를 한번 적용시켜보려고 구글에서 찾아온건데 중앙정렬이 안되더러구요...
제이쿼리를 아직 잘 볼줄몰라서 일단width:85%;margin:0 auto; 해놓은 상태입니다.
자연스럽게 계속 중앙 정렬시키는 법 없을까요??
전 줄아들때도 계속 중앙유지를 원해서요 ㅜㅜ 좌우 비율 똑같게용
미디어쿼리 방법은 알고 있지만 다른 방법을 찾고있습니다.
답변 2
도움이 될지는 모르겠지만 참고하신사이트는
//width: ,
// 1100 기준
//width: 214, // 5개
//width: 267, // 4개
//width: 356, // 3개
//width: 535, // 2개
// 1880 기준
//width: 462, // 4개
//width: 369, // 5개
//width: 308, // 6개
//width: 264, // 7개
width: 432,
delay: 50,
요렇게 해서 스크립트가 돌아가고있었습니다.
미디어쿼리말고 다른걸 원하신다면 자바를 짜야죠 뭐...
예를들면 if문으로 window의 width값에 따른(< 또는 >) 클래스의 width값 변경식이라던가...
네 그래서 지금 생각한게 직접만들고 게시판으로 불러오려고 합니다.
<? $bo_table = "vod"; include(G5_PATH."/bbs/board.php"); ?>
이렇게 넣어봤는데 존재하지 않는 게시판이라 뜨구용... 혹시 이건 해결방법이 있을까요?
vod 라는 게시판을 관리자페이지에서 만들어놓지 않은 문제가 아니면
인크루드를
./board.php?bo_table=$bo_table
로 넣어보셔요
말씀대로 인쿠르드 넣어봤는데 이번에는 튕기지는 않지만 아무것도 안나옵니다..ㅜㅜ
https://sir.kr/g5_tip/4736
이 페이지 참고해서 변형해서 쓰면 게시판불러오기가 가능할듯 합니다.
핀터레스트도 마찬가지로 width설정이 되어있습니다.
각 블록이 width: 260px;로 설정되어있으니
가로 사이즈 값을 930px(260px + 마진 값 x 3) 로 주시면 margin:0 auto;로 가운데 정렬이 가능합니다.
반응형으로 하실 경우 각 분기별로 max-width값을 주시면 가운데 정렬이 가능합니다.
말씀은 이해합니다.
하지만 전..
https://sir.kr/g5_skin/16143?sfl=wr_subject%7C%7Cwr_content&stx=%ED%95%80%ED%84%B0
이분것처럼 하고싶어서요..
그러시군요 ㅠ ㅠ ...
그렇다면 @그림자밟기 님을 소환 ㅡ,. ㅡ
masonry js 파일을 수정하시거나, 분기로 max-width 값 주는게 맞습니다.
masonry js 파일에서 핵심은 left포지션을 잡을때 0부터 잡는게 아니라 아빠엘리먼트의 너비를 계산해서 좌측여백을 추가로 주고 더해가게 처리해야 되는건데, js 소스 분석해서 변경하기보다는 media쿼리로 아빠엘리먼트 너비를 잡아주는게 훨씬 쉽게 처리하는 방식으로 보입니다. 굳이 js로 처리할 이유는 없어요.
뿅~
@그림자밟기 와~~~ 감사합니다^^
