0

有几个浮动div的，比如这里：http: //jsfiddle.net/YyKxB/ 如何让最后一个div.verylast填充剩余空间？当然，这个空间的宽度会根据divs 在实际窗口宽度中排列的行数和列数而有所不同。

没有JS如何做到这一点？

4

3 回答 3

2

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

http://jsbin.com/aqugok/2/edit

参考代码： 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 个浮动的下方可见。

于 2013-05-05T22:50:52.083 回答
1

也许有一个完美的匹配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;
}

这里是小提琴。

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

如果您对灵活的宽度感到满意，它确实有效，但我想这不是您想要的。看看这个 Fiddle。

但是，请注意，这是全新的，浏览器支持一点也不好。

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

/* ... 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;
    }
}

这是一个演示。正如我所说：我知道这是 hacky，但如果没有其他人可以提供一个干净的解决方案，也许 hacky 是可以的。;-)

浏览器兼容性：媒体查询有更好的支持，旧的IE也有回退。

于 2013-05-05T23:17:08.770 回答
-1

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

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

在右侧使用夸张的填充并用负边距补偿它在这个小提琴中看到它的工作

于 2013-05-05T23:21:38.233 回答