하위 요소의 너비를 기반으로 열 너비를 효율적으로 배포하는 방법은 무엇입니까?

Question

나는 불가능하다고 생각되는 HTML/CSS로 만들 디자인을 받았지만, 패배를 인정하고 타협하기 전에 나는 절대적으로 확신하고 싶다.

가변 길이 텍스트를 포함하는 항목의 수는 열이 사용 가능한 너비에 걸쳐 정확하게 분산되지만 각 열이 가장 넓은 항목보다 넓은 이 아닌지 확인하는 두 세트로 배열됩니다. 따라서 항목을 가능한 완벽하게 격자로 정렬되도록하면서 가능한 한 효율적으로 수평 공간을 사용합니다. 이 예를 고려 -

[-a--] [-cccccc-] [-eee-] [-g---] 
[-bb-] [-dddd---] [-ff--] [-hhh-] 

아마도이 표를 보인다, 그러나 용기가 수축 할 때 항목도 마무리해야한다는 생각, 여전히 열은 자신의 마법의 정렬 유지 - 나는 작동하지 않을 수

[-a---] [-cccccc-] 
[-bb--] [-dddd---] 
[-eee-] [-g------] 
[-ff--] [-hhh----] 

을 너비의 재귀 의존성을 해결하는 방법. 즉 각 "열"의 너비는 해당 열의 가장 긴 항목에 의해 정의되지만 사용 가능한 총 너비는 알려지며 열 너비의 정확한 합계 여야합니다.

CSS3 전용 솔루션을 사용하여 기쁜 브라우저를위한 고정 된 항목 너비 솔루션을 사용하게되어 기쁩니다. 그러나 CSS 속성으로이 마법을 성취 할 수 있는지에 관해 완전히 궁금해졌습니다.

그냥 출발점 어떤 종류의를 제공하기 위해, 여기 CSS3 열을 사용하여 Codepen입니다 : http://codepen.io/anon/pen/kiGgp

그것은 열이 고르게 분포로 좋지 않으며, 최적 대신에 배포 할 수있는 방법이 있는지 궁금하네요.

Answer 1

FlexBox 모델로 여러 번 시도한 후에도 사용자가 지정한 것을 달성하지 못했습니다. (BTW : 현재이 모델은 브라우저에서 제대로 지원되지 않습니다.)

그러나 노력하면서 필자는 괜찮은 해결책을 찾았습니다.

Demo in this Fiddle

I 소자 배치를 허용하면서, 균일 각 행을 요소 사이의 공간을 분배 관리했다. 각 요소는 필요한 공간의 정확한 양을 가져오고 나머지는 공백으로 행 내에서으로 나눕니다.

그러나 요소가 줄 바꿈해도이 너비가 유지됩니다. 따라서 '열과 같은'표시가 없습니다.

이것은 순수한 CSS이며 크로스 브라우저입니다. 가에서 테스트 : IE10, IE9, IE8, 크롬, FF

HTML

<div class="wrap"> 
    <div class="pair"> 
     <p>a</p> 
     <p>b</p> 
    </div> 
    <div class="pair"> 
     <p>cccccccc</p> 
     <p>dddddd</p> 
    </div> 
    <div class="pair"> 
     <p>ee</p> 
     <p>f</p> 
    </div> 
    <div class="pair"> 
     <p>ggggggggggg</p> 
     <p>hhhhhhhhh</p> 
    </div> 
    <div class="pair"> 
     <p>iiii</p> 
     <p>jjjjjj</p> 
    </div> 
    <div class="filler"></div> 
</div> 

CSS

* 
{ 
    padding: 0; 
    margin: 0; 
} 
.wrap 
{ 
    background-color: #ccc; 
    line-height: 0; 
    text-align: justify; 
} 

.pair 
{ 
    line-height: normal; 
    background-color: #ddd; 
    display: inline-block; 
    width: auto; 
} 

.filler 
{ 
    width: 100%; 
    height: 0; 
    font-size: 0; 
    display: inline-block; 
    vertical-align: top; 
}