CSS를 사용하여 자동 너비가 동일한 Side-by-Side Div를 만드는 방법은 무엇입니까?

자동 너비가 동일한 CSS 병렬 Div

상위 DIV 내에서 하위 DIV에 대해 동일한 자동 너비를 달성하는 것은 까다로울 수 있습니다. 전통적인 float 및 width 접근 방식. 그러나 display: table 속성을 사용하면 이 기능을 활성화하는 최신 솔루션이 제공됩니다.

Display: Table을 사용하는 솔루션

1. 상위 DIV(#wrapper )을 사용하여 테이블로 표시하고 고정 테이블 레이아웃을 활성화합니다. 이렇게 하면 하위 DIV가 동일한 너비를 차지하게 됩니다.
2. 상위 DIV의 높이를 설정하여 사용 가능한 수직 공간을 지정합니다.
3. 각 하위 DIV에 대해 표시 속성을 table-cell로 설정합니다. 나란히 표시되고 상위 DIV와 높이가 동일한지 확인하세요.

CSS 예:

HTML 예 :

참고:

• 이 솔루션은 IE7 이하와 호환되지 않습니다.
• 제공된 JSFiddle 예제 너비가 같은 하위 DIV 3개와 2개를 모두 보여줍니다.

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