인라인 블록을 사용하여 그리드 스타일 Tumblr 테마 만들기?

메신저가 인라인 블록을 사용하여 그리드 스타일의 Tumblr 테마를 만들려고했지만 몇 가지 ... 합병증이있었습니다. 게시물은 자동으로 서로 수직으로 정렬됩니다. 그것들이 모두 같은 차원이라면 그것은 문제가되지 않지만 게시물은 높이에 따라 다릅니다. 요약하자면, 필자는 수직 정렬을 전혀하지 않는 두 개의 기둥을 만드는 방법을 찾고 있습니다. 여러 가지 솔루션을 시도했지만 아무 것도 작동하지 않는 것 같습니다.인라인 블록을 사용하여 그리드 스타일 Tumblr 테마 만들기?

첫 번째 링크는 JSFIDDLE입니다.

This is how it currently looks CSS

how I would like it to look. 대

#entries { 
width: 600px; 
{block:PermalinkPage}width: 630px;{/block:PermalinkPage} 
position: relative; 
padding: 0px; 
margin: 10px 0px 0px 0px; 
} 

.posts { 
position: relative; 
text-align: left; 
background: {color:Posts}; 
width: 250px; 
{block:PermalinkPage}width: 500px;{/block:PermalinkPage} 
margin: 20px; 
padding: 0px; 
word-wrap: break-word; 
display: inline-block; 
clear: right; 
} 

.posts nth-child(even) { 
float: right; 
}

어떤 조언 가능한 대안이 우수 할 것입니다 나는 내 인생이 알아낼 수 있기 때문이다. 수직 정렬이 인라인 블록에 내재되어 있다고 생각하기 시작 했나요? GitHub의에 대한 링크가

출처

2014-10-29 Auburn

이 레이아웃은 CSS를 사용하여 달성하기 힘든 https://github.com/suprb/Grid-A-Licious

<div id="container"> <div class="item"> <img src="../"> <p>Text </p> </div> <div>

. 석공 술 (http://masonry.desandro.com/)과 같은 자바 스크립트 플러그인이 도움이 될 수 있습니다. –

Metafizzy와 Gridster는 두 개의 멋진 라이브러리입니다 –

@ 하리 : 그 세미 콜론은 내 모든 문제에 대한 해답이었습니다. 하하하. 그 모든 것이 아름답게 작동합니다. 정말 고마워! – Auburn

만 CSS는 어렵다하지만 당신은 자바 스크립트 플러그인 여기 gridalicious을 사용할 수 있습니다 여기에 예제 http://jsfiddle.net/wqfoku85/

출처

2014-10-29 16:58:03

인라인 블록을 사용하여 그리드 스타일 Tumblr 테마 만들기?

답변

관련 문제