벽돌 타일이 큰 간격으로 놓여있다

벽돌을 SaaS 제품으로 작업하려고 시도했지만 DOM에 대해서는 거의 통제하지 못했지만 CSS/JS 라이브러리에 대한 전체 액세스 권한이 있습니다.벽돌 타일이 큰 간격으로 놓여있다

문제는 수직 배치가 아닌 수평 배치 때문입니다 (첨부 된 이미지 참조). 여기

JSFiddle :

이

jQuery('.boxsitepagebody .blog-post-list').masonry({ 
    // options 
    containerStyle: null, 
    itemSelector: '.sblog-post', 
    columnWidth: '.grid-sizer', 
    percentPosition: true, 
    gutter: 1 
});

내가 생각하는 CSS 조각 관련성 :

.grid-sizer,.sblog-post 
{ 
width: 20% 
}

https://jsfiddle.net/ny2texas/0wncosbr/

OR ...는

여기

내가 벽돌 전화를 사용하고 무엇인가

아래, HTML의 기본 구성입니다. 절대 배치 ("left : 40.1862 %")는 위의 columnWidth로 선언 된 20 %의 거의 2 배입니다. 하지만 열을 건너 뛰고 다른 열마다 제목을 배치하는 이유는 무엇입니까?

<ul id="blog_post_list_blog_blog_posts_list_0_1" class="blog-post-list sblog-post-newlist" style="height: 4301.2px;"> 
    <li class="grid-sizer"></li> 
    <li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 0%; top: 0px;"></li> 
    <li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 40.1826%; top: 0px;"></li> 
    <li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 0%; top: 545px;"></li> 
    <li class="sblog-post sblog-post-newstyle row1" style="position: absolute; left: 40.1826%; top: 692px;"></li> 
... 
</ul>

출처

2017-05-11 Ken Aponte

문제가 해결되었습니다.

나는이 것을 알아 내기 위해 석조 술 소스 코드에 들어가야했다. 우선해야 할 일은 GitHub의 전체 소스 코드에 대해 축소 된 코드를 바꿔서 각 타일의 프로세스와 배치를 디버깅 할 수있게하는 것이 었습니다.

타일의 너비 (패딩 및 경계선 포함)는 179px이고 열의 너비는 175px (CSS에서 설정 한 856 * 20 %)입니다. 타일이 칼럼보다 크기 때문에 벽돌은 콜 스팬을 2로 설정합니다. 즉, 각 포스트는 2 개의 칼럼을 차지합니다 (따라서 갭). 벽돌에는 각 게시물의 위치를 자동으로 패드하는 컨트롤이 있기 때문에 CSS에 자신의 패딩을 추가하지 않는다고 가정합니다. 나는 그 패딩 (그리고 경계선)을 제거 했으므로 175 = 175px와 타일이 적절하게 배치되었습니다.

타일링에 수평 간격을 두려면 masonry()에 "거터"호출을 사용하십시오.

출처

2017-05-12 17:59:44

벽돌 타일이 큰 간격으로 놓여있다

답변

관련 문제