CSS3 열이 서로 대체하는 이유

Question

css3 열을 사용하여 가로 레이아웃을 만들고 싶습니다.

몇 가지 가로 간격의 그룹이있어서 서로 간격을 두어야하며 줄 바꿈을해서는 안됩니다.

내가 다른 다음의 각 CSS를 열 몇 가지 요소를 넣을 때, 한 그룹이 다른를 오버라이드 (override) 여기

<div class="horizontal-groups-wrapper"> 
    <div class="horizontal-group">...</div> 
    <div class="horizontal-group">...</div> 
</div> 

이 바이올린입니다 (그들은 100 % 폭을 가지고 있고 콘텐츠로 자신의 수평 expantion을 존중 해달라고 것 같다) :

http://jsfiddle.net/fee2G/1/

예상 결과 : CSS를 열 각각 다음 그룹이 이전 그룹 후에 잘 낳는

실제 결과 : 다음 그룹은 이전보다 작은 너비를 갖기 때문에 이전보다 우선합니다.

ps. 차라리 해결 방법이 아니라 해결책을 찾고 싶습니다. 예제가 완전히 간단하기 때문입니다.

Answer 1

열이있는 요소의 너비를 결정하는 것은 어렵습니다. 나는 두 개의 컬럼 화 된 div을 제거하고 모든 내용을 하나의 컬럼 화 된 엘리먼트로 옮기고, h2 엘리먼트 앞에 휴식을 강요하여 break-before 속성을 사용하여 원하는 효과를 얻는 것이 좋습니다.

h2 { 
    -webkit-column-break-before: always; 
    break-before: column; 
} 

다음은 demo입니다.