div를 활용한 테이블형 레이아웃 방식 구현_경험교환

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

먼저 xhtml의 구조를 살펴보겠습니다.

설명하지 않아도 이해하기 쉬운데, 테이블 구조를 보면 많이 비슷하지 않나요?

 
  
   
   
   
  

다음은 CSS입니다.

.equal {
디스플레이:테이블;
border-collapse:separate;
}
.row {
디스플레이:테이블-행; .row div {
디스플레이:테이블 셀;
}
.row .one {
너비:200px
}
.row .two {
너비: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은 테스트 후 완벽하게 표시될 수 있습니다.