CSS table-cell floted内容影响另一个table-cell内容的对齐

Question

当我在table-cell元素中获取一些浮动内容时，它会影响下一个“table-cell”内容的对齐。即使我删除了浮动效果。

请查看here。

现在如果我使最后一个单元格内容浮动，那么所有单元格中的内容都会向下移动;

请告诉我这背后的原因不是解决方法。

Answer 1

要修复：

现在它就像table-cell一样，你需要添加：

<div class="cell aligntop">
</div>

<style type="text/css">
    .aligntop { 
        vertical-align: top;
    }
</style>

到中间元素，强制内容位于顶部 - 演示：http://cssdesk.com/2sY46

为什么会这样？

  

table-cell的{​​{3}}为： baseline 因此，内容被天真地推到了最底层。虽然当你应用一个类.left，它要求以某种方式推送内容时，float: left;启动并在浮动后将其连接到表格单元格的左上角 - 同时看到{ {3}}了解更多信息。

Answer 2

已修复：http://cssdesk.com/KLBzv

两件事：

1. float：在div和clear之间没有浮动，或者我不知道你想要什么;

2. 所有单元格都有css vertical-align：top和此属性中间的数字