Question

有几个浮动的div，就像这里：http://jsfiddle.net/YyKxB/ 如何使最后div.verylast填充剩余空间？当然，此空间的宽度将根据div将在实际窗口宽度中排列的行和列的数量而变化。

如果没有JS怎么做？

Answer 1

这是您问题的解决方案;关键原则是：浮动2个元素，但不要浮动最后一个元素，而是给它一个最大宽度。

参考代码： HTML：

<div id="container">
    <div class="floated"></div>
    <div class="floated"></div>
    <div id="fill_remaining_space">This div fills remaining space</div>
</div>

CSS：

.floated {
  float: left;
  border: 1px solid red;
  width: 100px;
  height: 100px;
  margin-top: 2px;
}
#container {
  max-width: 100%;
  height: 106px;
  border: 1px solid blue;
}
#fill_remaining_space {
  border: 1px solid red;
  max-width: 100%;
  height: 100px;
  margin-top: 2px;
}

编辑但是，此解决方案仅适用于单行排列，并且仍会使最后一个div填充100％（因此最后一个div的任何背景/边框样式将在下面显示2个漂浮的。

Answer 2

也许与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;
}

Here is the Fiddle.

问题是，我不知道如何防止最后一个项目增长到容器的整个宽度，该宽度大于列的总和。对不起，也许别人有个主意。

如果你有宽阔的灵活性，它确实有效，但我猜这不是你想要的。只需查看this Fiddle。

但请注意，这是全新的，而browser support并不擅长。

因为似乎没有一个完美的解决方案（仅限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;
    }
}

Here is a demo.正如我所说：我知道这很糟糕，但如果没有其他人可以提供干净的解决方案，也许hacky是可以的。 ; - ）

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

Answer 3

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

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

在右侧使用夸张的填充并使用负边距进行补偿看到它在这个fiddle

中工作

几个浮动DIV和最后一个填充剩余空间

3 个答案: