为什么网格系统向右浮动最后一列

Question

我一直在关注许多响应式网格系统（最好的例子是基础），它们似乎都浮动了最后一个子列，这让我很烦，特别是在创建包含动态内容的页面时，他们有这么好的理由吗？

若有，那么有什么好的解决方法吗？

Answer 1

最后一列浮动在流体网格系统的右侧，以解决不同浏览器中的舍入错误，Safari似乎是最糟糕的。

如果X列的数量设置为百分比宽度（有或没有排水沟），则总宽度等于100％的情况很少见。由于亚像素舍入误差，它可能是98％，99.327％等。通常它只是略低于100％，但是一个明显的位。

因此，如果您有一行说2列或更多列，并且在具有100％宽的元素之后，如果所有网格列都向左浮动，则右边缘将不会对齐。

由于子像素舍入问题，网格列的宽度将略小于100％元素。为了解决这个问题，人们将最后一列向右浮动。这会隐藏最后一列和倒数第二列之间的子像素舍入空间，而不是在最后一列之后，使其不太明显。

.span-last { float: right }

以下是演示：http://codepen.io/bjankord/pen/mvKkn

调整页面大小，查看最后一列如何在右侧排列。

Answer 2

不是一个理想的解决方案（!important），但在大多数情况下，您应该可以使用

的内容覆盖它

tr td:last-child{
  float:left !important;
}

或jQuery如果在加载CSS后添加了某些东西

$('tr td').last().css('float','left');