CSS에서 Side-by-Side Div의 너비를 동일하게 만드는 방법은 무엇입니까?

CSS에서 병렬 Div의 동일한 너비

HTML에서는 div 요소를 사용하여 상위 컨테이너 내의 요소를 구성하는 경우가 많습니다. . 그러나 여러 하위 div를 동일한 너비로 나란히 정렬하는 것은 어려울 수 있습니다.

다음 HTML 구조를 고려하세요.

<div>

이 예에서는 하위 div가 나란히 정렬됩니다. , 그러나 임의의 너비가 있습니다. 동일한 너비를 달성하려면 display: table 속성을 사용하여 CSS 매직을 사용할 수 있습니다.

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

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

이 CSS 솔루션에는 다음과 같은 몇 가지 주요 기능이 있습니다.

• 세트 상위 div(#wrapper)를 테이블(display: table)로 표시하고 table-layout:fixed를 설정하여 동일한 열을 보장합니다. widths.
• 하위 div(#wrapper div)가 동일한 높이의 표 셀(표시: table-cell)로 표시되도록 설정합니다.

이점:

• 최신 브라우저에서 작동합니다(IE7은 지원)
• 사용 가능한 공간에 따라 자동으로 열 너비 조정
• 다양한 하위 div 수로 유연한 레이아웃 허용

라이브 예시:

• 두 개의 Div: [JSFiddle](https://jsfiddle.net/g4dGz/1/)
• 세 개의 Div: [JSFiddle](https://jsfiddle.net/g4dGz/)

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