Javascript 浮动和非浮动div之间的1px边界

目标是创建带有缩进行的网格，其中最后一个单元格填充到页面的右侧，每个单元格周围有1px的边框

下面尝试中的问题是，行的最后一个单元格的边框会扩展整个页面宽度，从而在缩进周围创建不需要的边框。这似乎很奇怪，因为div内容是正确对齐的

.桌子{
边界塌陷：塌陷；
}
.行{
}
.缩进{
最小宽度：20px；
浮动：左；
}
.细胞{
边框样式：实心；
边框宽度：1px；
左边距：-1px；
边缘底部：-1px；
浮动：左；
}
lastcell先生{
浮动：无；
}           
x
Y
zzz
长文本
x
Y
zzz
长文本
x
Y
zzz
长文本

您始终可以在行周围绘制边框，并且只给每个单元格（最后一个除外）留一个

左边框

：

.indent{
最小宽度：20px；
浮动：左；
}
.细胞{
右边框：1px实心；
左边距：-1px；
浮动：左；
}
lastcell先生{
边界：0；
浮动：无；
}
.container>div{
边框：1px实心；
边界顶部：0；
}
.container>div:第一个子级{
边框顶部：1px实心；
}

x
Y
zzz
长文本
x
Y
zzz
长文本
x
Y
zzz
长文本

当您从最后一个单元格中删除浮点时，您已经将其转换回一个块元素，该块元素捕获其容器的100%（-在您的示例中为其他浮点）。 删除lastCell类，并将clear:都添加到.row

    .row {
        clear: both;
    }

---

无论如何，我必须同意@Vucko的评论-使用表格或css表格代替。

如评论中所述，您可以通过

显示：表格/表格单元格

实现所需

.table{
边界塌陷：塌陷；
显示：表格；
宽度：100%；
}
.行{
边缘底部：-1px；
}
.缩进{
最小宽度：20px；
显示：表格单元格；
}
.细胞{
边框样式：实心；
边框宽度：1px；
显示：表格单元格；
}
lastcell先生{
宽度：100%；
}

x
Y
zzz
长文本
x
Y
zzz
长文本
x
Y
zzz
长文本

为什么要使用

浮动

？通过

显示：表/表行/表单元格

@Vucko，理想情况下单元格会在狭窄的页面中回流，但您的建议很好。如果你把这把小提琴作为答案，我会把它标记为接受如果我理解正确，这似乎使最后一个单元格没有延伸到页面的右侧。最后一个单元格是浮动的，这意味着它没有尝试延伸到100%的宽度。行清除：两者都只是告诉它停止浮动，然后转到下一行。

    .row {
        clear: both;
    }