내 CSS 레이아웃에서 "display: table-column"이 작동하지 않는 이유는 무엇입니까?
제공된 HTML 및 CSS 코드를 고려하면 2개의 열("colLeft" 및 "colRight")과 3개의 행("row1", "row2" 및 "row3")이 있는 레이아웃이 나타날 것으로 예상할 수 있습니다. 그러나 Chrome 및 IE와 같은 브라우저에서는 전체 레이아웃이 0 크기로 축소됩니다.
이러한 동작은 CSS 테이블 모델 작동 방식에 대한 근본적인 오해에서 발생합니다. HTML 테이블 모델과 유사하지만 중요한 차이점이 있습니다.
올바른 HTML 및 CSS 구조:
유효한 CSS 테이블 레이아웃을 생성하려면 다음을 수행해야 합니다. 다음 구조를 사용하십시오:
<code class="html"><div class="mytable"> <div class="mycolumn1"></div> <div class="mycolumn2"></div> <div class="myrow"> <div class="mycell">Contents of first cell in row 1</div> <div class="mycell">Contents of second cell in row 1</div> </div> <div class="myrow"> <div class="mycell">Contents of first cell in row 2</div> <div class="mycell">Contents of second cell in row 2</div> </div> </div></code>
<code class="css">.mytable { display: table; } .mycolumn1 { display: table-column; background-color: green; } .mycolumn2 { display: table-column; background-color: red; } .myrow { display: table-row; } .mycell { display: table-cell; }</code>
위 내용은 CSS 테이블 레이아웃에서 \'display: table-column\'이 예상대로 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!