약간의 문제가 있습니다. FireFox 3.6을 사용하고 있으며 다음과 같은 DOM 구조가 있습니다.
<div class="view-row">
<div class="view-type">Type</div>
<div class="view-name">Name</div>
</div>
그리고 다음 CSS :
.view-row {
width:100%;
display:table-row;
}
.view-name {
display: table-cell;
float:right;
}
.view-type {
display: table-cell;
}
이륙하면 100 % 너비로 display:table-row올바르게 표시됩니다 view-row. 다시 넣으면 축소됩니다. 나는 이것을 JS Bin에 올렸다.
무슨 일이야?
답변:
display:table-row등을 사용 하는 경우 포함 테이블을 포함하는 적절한 마크 업이 필요합니다. 그것이 없으면 원래 질문은 기본적으로 다음과 같은 잘못된 마크 업을 제공합니다.
<tr style="width:100%">
<td>Type</td>
<td style="float:right">Name</td>
</tr>
위의 테이블은 어디에 있습니까? 당신은 단지 난데없이 행을 가질 수 없습니다 (TR이 중 하나에 포함되어야합니다 table, thead, tbody, 등)
대신으로 외부 요소를 추가 display:table하고 포함하는 요소에 100 % 너비를 넣으십시오. 두 개의 내부 셀은 자동으로 50/50으로 이동하고 텍스트를 두 번째 셀의 오른쪽에 맞 춥니 다. floats테이블 요소는 잊으십시오 . 너무 많은 두통을 유발할 것입니다.
마크 업 :
<div class="view-table">
<div class="view-row">
<div class="view-type">Type</div>
<div class="view-name">Name</div>
</div>
</div>
CSS :
.view-table
{
display:table;
width:100%;
}
.view-row,
{
display:table-row;
}
.view-row > div
{
display: table-cell;
}
.view-name
{
text-align:right;
}테스트 된 답변 :
.view-row css에서 다음을 변경하십시오.
display:table-row;에:
display:table그리고 "float"를 제거하십시오 . 모든 것이 예상대로 작동합니다.
댓글에서 제시 한대로 포장 테이블이 필요 없습니다. CSS는 암시적인 트리 구조 (이 경우 행) 수준을 생략 할 수 있습니다. 코드가 작동하지 않는 이유는 "너비"가 테이블 행 수준이 아닌 테이블 수준에서만 해석 될 수 있기 때문입니다. "테이블"과 "테이블 셀"이 바로 아래에있는 경우 암시 적으로 행에있는 것으로 해석됩니다.
작업 예 :
<div class="view">
<div>Type</div>
<div>Name</div>
</div>CSS 사용 :
.view {
width:100%;
display:table;
}
.view > div {
width:50%;
display: table-cell;
}<table><td></td></table>W3C에 따라 자체적으로 잘못된 HTML 마크 업이되는 CSS에 해당하는 것을 제안합니다 . 유효성을 검사하는 동안이 마크 업을 모방하도록 브라우저에 지시하는 이유는 무엇입니까?
CSS3 사양에 따라 레이아웃을 테이블 스타일 요소로 래핑 할 필요가 없습니다. 브라우저는 요소가 존재하지 않는 경우 포함 된 요소의 존재를 유추합니다.
에 제공 .view-type클래스 float:left;또는 삭제 float:right;의를.view-name
편집 :<div class="view-row"> 예를 들어 div 를 다른 div로 래핑하십시오 .<div class="table">
다음 CSS를 설정하십시오.
.table {
display:table;
width:100%;}올바른 결과를 얻으려면 테이블 구조를 사용해야합니다.
테이블 내에서 직접 테이블 셀을 중첩 할 수 있습니다. 당신은 테이블이 있습니다. 테이블 행 시작이 작동하지 않습니다. 이 HTML로 시도해보십시오.
<html>
<head>
<style type="text/css">
.table {
display: table;
width: 100%;
}
.tr {
display: table-row;
width: 100%;
}
.td {
display: table-cell;
}
</style>
</head>
<body>
<div class="table">
<div class="tr">
<div class="td">
X
</div>
<div class="td">
X
</div>
<div class="td">
X
</div>
</div>
</div>
<div class="tr">
<div class="td">
X
</div>
<div class="td">
X
</div>
<div class="td">
X
</div>
</div>
<div class="table">
<div class="td">
X
</div>
<div class="td">
X
</div>
<div class="td">
X
</div>
</div>
</body>
</html>