다음은 제가 번역한 내용입니다. 기사에 대한 이해를 바탕으로 한 무료 번역입니다. 번역에 흠집을 내지 마십시오. 제 목적은 단지 이 CSS 기술을 전달하는 것입니다.
많은 웹 디자이너는 여러 열의 위치를 제어하는 클래식 테이블 레이아웃의 셀처럼 두 개 이상의 컨테이너를 동일한 높이에 나란히 배치하고 내부에 각 컨테이너의 내용을 표시하는 것을 좋아합니다. 콘텐츠는 중앙에 표시되거나 위쪽에 정렬됩니다.
하지만 테이블을 사용하여 구현하는 것을 좋아하지 않는다면 어떻게 해야 할까요? 이를 구현하는 방법은 시각적 착시를 기반으로 구현하는 방법, JS 컨트롤을 사용하여 높이를 동일하게 만드는 방법, 컨테이너의 오버플로 부분을 숨기고 열의 음수 하단 경계와 양수 내부 경계를 결합하는 방법 등 여러 가지가 있습니다. 동일한 열 높이 문제를 해결하기 위한 패치입니다.
실제로, display:table, display:table-row 및 display:table-cell을 사용하여 달성할 수 있는 간단한 방법이 있으며, 높이가 작은 컨테이너는 상대적으로 높이가 높은 컨테이너에 적응하지만 IE에서는 지원하지 않습니다. 이 속성은 현재로서는 IE를 비난하지 않으며 앞으로는 개선될 것이라고 믿습니다. 여기서 나는 모델을 만들었습니다.
먼저 xhtml의 구조를 살펴보세요.
<div 클래스=같음>
<div 클래스=행>
<div 클래스=1></div>
<div 클래스=2></div>
<div 클래스=세></div>
</div>
</div>
설명하지 않아도 이해하기 매우 간단하지만, 여기 테이블 구조가 있는데, 많이 비슷하지 않나요?
<테이블>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
CSS는 다음과 같습니다.
.동일한 {
표시:테이블;
테두리 축소:별도;
}
.열 {
표시:테이블 행;
}
.row div {
디스플레이:테이블 셀;
}
.row .one {
너비:200px;
}
.row .two {
너비:200px;
}
.행 .세 {
}
설명하다:1.dispaly:table; layer.equal을 블록 수준 요소의 테이블로 표시합니다. 즉, 테이블로 처리합니다.
2.border-collapse:separate; 테이블이 셀을 병합하기 전과 마찬가지로 테두리는 독립적입니다.
3.display:table-row; .row를 테이블 행 tr로 표시합니다.
4.display:table-cell; .row의 하위 div를 테이블 셀 td로 표시합니다.
5. 그런 다음 너비를 정의합니다.
여기서도 Border-spacing:10px는 여러 상자를 구분하는 데 사용됩니다. 위에서 설명한 대로 IE에서는 정상적으로 표시할 수 없지만 다음과 같습니다: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8 b, Netscape 7.1은 테스트 후 완벽하게 표시될 수 있습니다.