CSS를 사용하여 동일한 너비로 나란히 있는 Div를 만드는 방법은 무엇입니까?

CSS를 사용하여 자동으로 동일한 너비를 갖는 병렬 Div

상위 div 내에서 자동으로 동일한 너비를 갖는 하위 div를 생성하려면, CSS의 display: table 속성의 강력한 기능을 활용하세요. 이 접근 방식은 IE7에서는 지원되지 않지만 최신 브라우저에서 원하는 결과를 효과적으로 달성합니다.

해결책:

1. 표시할 상위 div 설정: 테이블 및 테이블 레이아웃: 고정됨. 이렇게 하면 테이블과 같은 구조가 설정됩니다.
2. 표시할 하위 div를 table-cell로 설정합니다. 이렇게 하면 테이블 셀로 처리되어 너비가 동일해집니다.
3. 원하는 대로 상위 div의 너비 및 높이 속성을 조정합니다.

예 코드:

CSS:

#wrapper {
    display: table;
    table-layout: fixed;

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

HTML:

<div>

데모:

다음을 방문하세요 실제 솔루션을 볼 수 있는 JSFiddle 링크:

• 세 개의 div: http://jsfiddle.net/g4dGz/
• 두 개의 div: http://jsfiddle.net/g4dGz/ 1/

위 내용은 CSS를 사용하여 동일한 너비로 나란히 있는 Div를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!