以下html按预期方式工作,除了边缘顶部被表格行完全忽略.我不知道为什么.
<div class='table'>
<div class='margin-top5 row user' id='user_113'>
<div class='cell left avatar margin-right5'><img alt="Blank_avatar_thumb" src="/images/blank_avatar_thumb.png?1295354025" /></div>
<div class='cell left'>
<div class='bold'><a href="/voisins/113">Dandre</a></div>
<div class='small of_hidden'>toothpicking,veryveryveryveeerrrryyyyyylooooooooong,kidnapping...</div>
</div>
<div class='cell right'>42</div>
<div class='clear'></div>
</div>
/* more rows */
</div>
CSS：
div.table {
display: table;
width: 100%;
}
div.row {
display: table-row;
}
div.cell {
display: table-cell;
}
div.left {
float: left;
}
div.right {
float: right;
}
div.clear {
clear: both;
}
.avatar {
vertical-align: middle;
}
.margin-top5 {
margin-top: 5px;
}
.margin-right5 {
margin-right: 5px;
}
.bold {
font-weight: bold;
}
.of_hidden {
overflow: hidden;
}
.small {
font-size: 0.8em;
}
body,p,ol,ul,td {
font-family: verdana,arial,helvetica,sans-serif;
font-size: 13px;
line-height: 18px;
}
编辑：
如果我从行div中删除.row类,它将开始拾取margin-top.
解决方法
这是cullprit：display：table-row;
你告诉div的行为像tr,tr的没有margin …或padding.
你告诉div的行为像tr,tr的没有margin …或padding.
您可以将填充应用于td,而不是边距.
