我已经处于需要对 div 元素使用 display:table-cell 命令的位置。
但是我发现只有在宽度上添加百分比时“单元格”才能正常工作。
在这个小提琴中http://jsfiddle.net/NvTdw/ http://jsfiddle.net/NvTdw/当我删除百分比宽度时，单元格的宽度不相等，但是，当将百分比值添加到宽度时，一切都很好，但仅当该百分比等于最大 div 数的比例时，因此对于四列 25% ，五个 20%，在本例中五个为 16.666%。
我想也许添加一个更少的百分比 - 比如说 1% 就可以很好地解决所有问题，但单元格再次脱节。
为什么是这样？
.table {
display: table;
height: 200px;
width: 100%;
}
.cell {
display: table-cell;
height: 100%;
padding: 10px;
width: 16.666%;
}
.grey {
background-color: #666;
height: 100%;
text-align: center;
font-size: 48px;
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
<div class="table">
<div class="cell">
<div class="grey">Block one</div>
</div>
<div class="cell">
<div class="grey">Block two</div>
</div>
<div class="cell">
<div class="grey">Block three</div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey">Block</div>
</div>
<div class="cell">
<div class="grey">Block two</div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey">Block one</div>
</div>
<div class="cell">
<div class="grey">Block two</div>
</div>
<div class="cell">
<div class="grey">Block three</div>
</div>
<div class="cell">
<div class="grey">Block four</div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey">x</div>
</div>
<div class="cell">
<div class="grey">xx</div>
</div>
<div class="cell">
<div class="grey">xxx</div>
</div>
<div class="cell">
<div class="grey">xxxx</div>
</div>
<div class="cell">
<div class="grey">xxxxxx</div>
</div>
<div class="cell">
<div class="grey">Block five test</div>
</div>
</div>
<div class="table">
<div class="cell">
<div class="grey">Block</div>
</div>
<div class="cell">
<div class="grey">Block two</div>
</div>
<div class="cell">
<div class="grey">Block three</div>
</div>
</div>
您只需要添加“table-layout：fixed;”
.table {
display: table;
height: 100px;
width: 100%;
table-layout: fixed;
}
http://www.w3schools.com/cssref/pr_tab_table-layout.asp http://www.w3schools.com/cssref/pr_tab_table-layout.asp
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
