Display:Table-单元格宽度问题
Display:Table-Cell width issues
我已经为三列布局设置了固定的像素宽度值,并希望使用 display:table-cell
属性,以便列始终对齐到具有最大内容的列 div 的高度.
我以前用过这种技术没问题,但我现在似乎无法修复列宽,相反,如果 div 中的内容增加,它会使 div 更宽而不是更高,同时这压缩了相邻单元格的宽度。显然,我使用 table-cell 的全部意义在于阻止这种情况的发生,任何人都可以看到是什么阻止了列宽的工作吗?在 JSFiddle 中,宽度最初看起来是正确的,但如果您在任何列中添加额外的文本,您会发现它没有像我需要的那样响应。
下面的 html/css 根据上面的 JSFiddle:
<div class="container">
<div class="fwcol">
<div class="col">
<div class="thirds">COLUMN1</div>
<div class="thirdm">COLUMN2</div>
<div class="thirds">COLUMN3</div>
</div><!--col-->
</div><!--fwcol-->
</div><!--container-->
.container {
margin: 0 auto;
width: 966px;
background:red;
overflow:hidden;
}
.fwcol {
float: left;
width: 966px;
}
.col {
width:966px;
display:table;
border-collapse:separate;
border-spacing:20px;
}
.thirds, .thirdm {
display: table-cell;
padding: 20px;
background: #FFF;
}
.thirds {
width: 255px;
}
.thirdm {
width: 256px;
}
将这两个属性添加到.col class:
display:table;
table-layout:fixed;
您还可以将 "word-wrap:break-word;"
添加到子 div 以防止溢出。
我已经为三列布局设置了固定的像素宽度值,并希望使用 display:table-cell
属性,以便列始终对齐到具有最大内容的列 div 的高度.
我以前用过这种技术没问题,但我现在似乎无法修复列宽,相反,如果 div 中的内容增加,它会使 div 更宽而不是更高,同时这压缩了相邻单元格的宽度。显然,我使用 table-cell 的全部意义在于阻止这种情况的发生,任何人都可以看到是什么阻止了列宽的工作吗?在 JSFiddle 中,宽度最初看起来是正确的,但如果您在任何列中添加额外的文本,您会发现它没有像我需要的那样响应。
下面的 html/css 根据上面的 JSFiddle:
<div class="container">
<div class="fwcol">
<div class="col">
<div class="thirds">COLUMN1</div>
<div class="thirdm">COLUMN2</div>
<div class="thirds">COLUMN3</div>
</div><!--col-->
</div><!--fwcol-->
</div><!--container-->
.container {
margin: 0 auto;
width: 966px;
background:red;
overflow:hidden;
}
.fwcol {
float: left;
width: 966px;
}
.col {
width:966px;
display:table;
border-collapse:separate;
border-spacing:20px;
}
.thirds, .thirdm {
display: table-cell;
padding: 20px;
background: #FFF;
}
.thirds {
width: 255px;
}
.thirdm {
width: 256px;
}
将这两个属性添加到.col class:
display:table;
table-layout:fixed;
您还可以将 "word-wrap:break-word;"
添加到子 div 以防止溢出。