CSS 여러 열, 깨지지 않는 내용

Question

게시물의 두 열 레이아웃을 갖고 싶습니다. 균형이 잡혀 있어야하지만, 하나가 다른 하나보다 약간 크면 받아 들일 수 있습니다. 중요한 것은 게시물이 반으로 나뉘어서는 안된다는 것입니다.

특정 문제 : (포스트 텍스트가 하나 개의 컬럼에 남아 있어야합니다.) http://www.magyarregeszet.hu/?page_id=279

#main-column-multicol2 { 
-moz-column-count:2; /* Firefox */ 
-webkit-column-count:2; /* Safari and Chrome */ 
column-count:2; 
-moz-column-gap:20px; /* Firefox */ 
-webkit-column-gap:20px; /* Safari and Chrome */ 
column-gap:20px; 
column-fill: auto; 

padding-top:20px; 
padding-bottom:10px; 
padding-right:10px; 
padding-left:10px; 
} 

등, 깨지지 않는 div의, 상자를 만드는 방법이 있나요? 나는 column-break-inside를 발견했다 : avoid-column; 그러나 속임수를하지는 않습니다. 이것을 올바르게 사용하는 방법?

편집 : 포스트 래퍼의 구조는 다음과 같습니다. 예를 들어 단락의 경우 열 구분 안쪽이 작동하지만 가장 바깥 쪽 div에 대해 작동하고 싶습니다.

<div class="unbreakable-post"> 
<header class="opacity box"> 
<h2>...</h2> 
</header> 
<hr /> 
<div class="entry"> 
... 
</div> 
</div> 

감사합니다,

Sziro

Answer 1

나는 시도 것을 부여

.post { 
    -webkit-column-break-inside: avoid; 
    -moz-column-break-inside: avoid; 
    column-break-inside: avoid; 
} 

성공을 했어.