정적 너비 컨테이너를 기준으로 div 요소의 너비를 설정하십시오.

Question

div 너비의 너비를 컨테이너 너비에 따라 적절하게 설정하고 싶습니다. 그러나 번호가 변경되므로 너비가 그에 따라 조정되어야합니다. 여기에 명확하게 상황을 설명하는 CSSDeck 링크는 다음과 같습니다 당신이 볼 수 있듯이, 두 컨테이너 (필요) 동일

http://cssdeck.com/labs/hvmkapkd

, 또한 그들이 (도 필요) 모듈 형 컨텐츠 (<div> 요소)를 가지고있다. 동일한 구조를 유지하면서 CSS를 사용하여 div의 너비를 자동 조정하여 전체 컨테이너를 채울 수 있습니까?

첫 번째 컨테이너의 각 항목의 너비는 33.333 %이고 두 번째 컨테이너의 각 항목의 너비는 20 %입니다.

Answer 1

질문을 게시 한 직후에 해결책을 찾았습니다. .container 요소를 table으로 설정하고 색 콘텐츠를 table-cell으로 설정했습니다.

링크는 위의 업데이트,하지만 여기 어쨌든 다시 한 번 링크입니다 : http://cssdeck.com/labs/hvmkapkd

Answer 2

플렉스 박스 개념을 기회 (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

.container{ 
    height: 100px; 
    width: 100px; 
    background-color: lightgray; 
    margin: 20px; 


/* flexbox setup */ 
    display: -webkit-flex; 
    -webkit-flex-direction: row; 

    display: flex; 
    flex-direction: row; 
} 

.container > div { 
    height: 100%; 

/* flexbox setup */ 
    -webkit-flex: 1 1 auto; 
    flex: 1 1 auto; 
} 

(http://cssdeck.com/labs/full/hvmkapkd)