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

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

Display: Table을 사용하는 솔루션

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

CSS 예:

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

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

HTML 예:

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