Css 几个浮动div，最后一个填充剩余空间

有几个浮动的

div

s，如下所示： 如何使最后一个

div.verylast

填充剩余空间？当然，此空间的宽度将根据

div

s在实际窗口宽度中排列的行数和列数而变化

---

如何在没有JS的情况下做到这一点？

以下是解决您问题的方法；关键原则是：浮动两个元素，但不要浮动最后一个元素，而是给它一个最大宽度。

参考代码： HTML：

此div将填充剩余空间

CSS：

。浮动{
浮动：左；
边框：1px纯红；
宽度：100px；
高度：100px；
边缘顶部：2倍；
}
#容器{
最大宽度：100%；
高度：106px；
边框：1px纯蓝色；
}
#填充剩余的空间{
边框：1px纯红；
最大宽度：100%；
高度：100px；
边缘顶部：2倍；
}

---

编辑：然而，此解决方案仅适用于一行排列，并且仍将使最后一个div填充100%（因此最后一个div的任何背景/边框样式也将在两个浮动的div下方可见。

可能与

flex

完美匹配，但我只是“接近”每个项目具有固定宽度：

body > div {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

body > div > div {
    -webkit-flex-basis: 200px;
    border-top: 1px solid black;
    margin: 5px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-grow: 0;
    flex-grow: 0;
}

.verylast {
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

问题是，我不知道如何防止最后一项增长到容器的整个宽度，而这个宽度大于列的总和。对不起，也许其他人有办法

如果你对灵活的宽度还可以的话，它确实可以工作，但我想那不是你想要的。看看吧

但是，请注意，这是全新的，一点也不好

---

因为似乎没有一个完美的解决方案（仅限于CSS），所以我尝试朝着一个骇客的方向走：也许您的情况允许使用媒体查询：

/* ... other media queries for all the other widths */

@media screen and (max-width: 629px) {
    body > div {
        width: 420px;
    }
}

@media screen and (max-width: 419px) {
    body > div {
        width: 210px;
    }
}

正如我所说的：我知道这是一种黑客行为，但如果没有其他人能够提供一个干净的解决方案，也许黑客行为是可以的

---

浏览器兼容性：媒体查询有，旧IE也有回退。

此解决方案将最后一个div扩展到最大可用剩余宽度 您需要应用用于类似柱高度的相同技巧

div.verylast {
    padding-right:2000px;
    margin-right:-2000px;
}

在右侧使用夸张的填充，并使用负边距进行补偿

---

看到它在这个

中工作了吗？你到底是什么意思？如果窗口大小允许3列（因此前9个

在3x3矩阵中），最后一个

是否应跨越最后一行的所有3列？是。最后一个

div

应至少有一列宽，但当（在

div

s的最后一行）有两列的剩余空间时，它应填充此空间。三、四等分都是一样的，最高可达100%。你要寻找的是非常棘手的：你指的是水平还是垂直空间？当浮动div需要多条线来排列它们，并且.verylast尝试扩展到其最大可用宽度时，它将比上一行浮动div中安排的最后一个div向右扩展更多。如果这对你来说是可以的话，那么有一个简单的解决方案来解决这个问题，很好，但是当浮动div需要不止一行来安排自己时，它就不起作用了。啊，我想这就是你在评论中提到的解决方案吧？是的，我没看到。对于多行解决方案，可以只复制容器……但您永远不知道客户机将根据其窗口宽度获得多少行。对不起，它还不起作用。对不起，它不起作用。最后一个

div

很大，但没有以正确的方式填充剩余的空间。它只是将整个页面扩展到2000px。谢谢！这是最接近实际的解决方案。“除了最后一个

div

之外，所有div的宽度都应该固定，所以是的-它仍然不完美。”friedman补充了一点技巧，可能会有帮助。它真的很酷。你知道它在不同浏览器中的作用吗？@friedman在两个css功能中都添加了浏览器信息。