형제 div의 순서에서 높이를 가장 높은 값으로 설정할 수 있습니까?

Question

그래서 인라인 div 집합이 있습니다. 너비는 하드 코딩되어 있지만 내부의 내용을 변경하여 div의 높이가 다른 것을 의미합니다.

콘텐츠가 부모 div에 쏟아 질 위험없이 모든 div가 동일한 높이로 유지되도록하는 방법이 있습니까?

저는 min-height를 계승했지만 동적이라고 생각하지 않습니다. 따라서 상위 div의 최소 높이가 320px이고 형제 div가이 값을 상속하는 경우 콘텐츠로 인해 형제가 320보다 높아지게되면 해당 div와 부모 div가 변경되지만 다른 형제는 그대로 유지됩니다. 320.

CSS 이외의 다른 방법을 사용하지 않고이 문제를 해결할 방법이 있습니까?

Answer 1

CSS '테이블 display을 사용하면됩니다.

다음 예제 마크 업을 가지고 :

<div> 
    <figure>Example one</figure> 
    <figure>This is example twooooo</figure> 
    <figure>3</figure> 
</div> 

당신은 단순히, 그들이 div 컨테이너의 경계 외부에서 탈출 결코 보장하면서 일정한 높이를 유지하는 세 가지 figure 요소를 원하는 경우 :

div { 
    display:table; 
} 

div > figure { 
    display:table-cell; 
} 

을

세 개의 모든 figure 요소는 이제 동일한 높이로 유지됩니다. 가장 많은 요소가있는 요소의 높이가 또는 인 min-height의 어느 쪽이든 큰 쪽.

여기에 JSFiddle example이 있습니다. div에 회색 배경색을 부여하고 figure 요소가 경계 밖으로 벗어나지 않도록주의하십시오.

브라우저 지원 : http://caniuse.com/#feat=css-table