표와 같은 레이아웃 div_CSS/HTML

http://www.456beeastreet.com/archive/200405/equal_height_boxes_with_css/

다음은 제가 번역한 내용으로, 저의 이해를 바탕으로 한 무료 번역입니다. 기사의 번역에 결함을 찾지 마십시오. 제 목적은 단지 이 CSS 기술을 전달하는 것입니다

많은 웹 디자이너는 두 개 이상의 컨테이너를 동일한 높이로 나란히 배치하고 각 컨테이너를 내부에 표시하는 것을 좋아합니다. 컨테이너의 콘텐츠는 여러 열의 위치를 ​​제어하는 ​​클래식 테이블 레이아웃의 셀과 같습니다. 또한 컨테이너의 콘텐츠를 중앙에 정렬하거나 상단에 정렬하는 것이 좋습니다.
하지만 테이블을 사용하여 구현하는 것을 좋아하지 않는데 어떻게 해야 할까요? 이를 구현하는 방법은 시각적 착시를 기반으로 구현하는 방법, JS 컨트롤을 사용하여 높이를 동일하게 만드는 방법, 컨테이너의 오버플로 부분을 숨기고 열의 음수 하단 경계와 양수 내부 경계를 결합하는 방법 등 여러 가지가 있습니다. 동일한 열 높이 문제를 해결하기 위한 패치입니다.
실제로는 display:table, display:table-row 및 display:table-cell을 사용하여 달성할 수 있는 간단한 방법이 있으며, 높이가 작은 컨테이너는 상대적으로 높이가 높은 컨테이너에 적응하지만 IE에서는 속성은 이를 지원하지 않습니다. 지금은 IE를 비난할 필요가 없습니다. 앞으로는 개선될 것이라고 믿습니다. 여기서 나는 모델을 만들었습니다.

xhtml의 구조를 먼저 살펴보세요:

설명하지 않아도 이해하기 매우 간단하지만, 테이블 구조를 보면 많이 비슷하지 않나요?














다음은 CSS입니다:
.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row .one {
width:200px;
}
.row .two {
width:200px;
}
.row . three {

}

설명:
1.dispaly:table; 블록 수준으로 요소의 테이블 표시는 테이블로 처리됩니다.
2.border-collapse:separate; 테이블이 셀을 병합하기 전과 마찬가지로 테두리는 독립적입니다.
3.display:table-row ; .row를 테이블 행 tr 표시
4.display:table-cell; .row의 하위 수준 div를 테이블 셀 td로 표시
5. 그런 다음 너비를 정의합니다. 여러 상자를 구분하기 위해 여기서도 간격:10px가 사용됩니다. 위에서 설명한 대로 IE에서는 정상적으로 표시할 수 없지만 다음에서는 표시할 수 있습니다: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, Netscape 7.1 테스트 후 완벽한 디스플레이.이제 전체 임무가 끝났습니다.