CSS에서 Side-by-Side DIV에 대해 동일한 자동 너비를 달성하는 방법은 무엇입니까?

CSS에서 병렬 DIV에 대해 동일한 자동 너비 달성

여러 하위 DIV를 포함하는 HTML 상위 DIV가 있고 하위 DIV가 자동으로 동일한 너비를 갖기를 원합니다. 다음은 display: table 속성을 사용하여 이를 달성하는 솔루션입니다.

#wrapper {
    display: table;
    table-layout: fixed;
    width: 90%;
    height: 100px;
    background-color: Gray;
}

#wrapper div {
    display: table-cell;
    height: 100px;
}

상위 DIV의 display: table 속성은 테이블과 같은 구조를 설정합니다. table-layout: 고정 속성은 열(즉, 하위 DIV)의 너비가 고정되도록 합니다. 하위 DIV에 대한 display: table-cell 속성은 이를 테이블의 "셀" 내에 배치합니다.

이 솔루션은 IE7을 제외한 최신 브라우저에서 효과적으로 작동합니다. 다음은 몇 가지 예입니다.

• DIV 3개: https://jsfiddle.net/g4dGz/
• DIV 2개: https://jsfiddle.net/g4dGz/1/

위 내용은 CSS에서 Side-by-Side DIV에 대해 동일한 자동 너비를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!