css - 当 float 元素处于其固定宽度同级之间时，如何使它填充剩余的水平空间？

Question

我正在尝试创建具有多个浮动元素的手风琴菜单。我希望所有非活动菜单项都折叠为较小的固定宽度（约40px），而活动项则扩展为剩余宽度。我希望菜单具有响应性/弹性，因此只有不活动的菜单项才会具有固定的宽度。

下面是我希望菜单外观/功能类似的示例（不使用jQuery设置宽度）...

Accordionza - CodeCanyon.com

当仅浮动两个元素并为其设置固定宽度时，仅显示两个菜单项时，就能够实现预期的效果，而没有浮动弹性项目并使其宽度为100％时，我可以实现预期的效果。

两列（工作）

<style type="text/css">
    #one {
        float:left;
        width:40px;
    }
    #two {
        width:100%;
    }
</style>

<div class="row">
    <div class="col" id="one">One</div>
    <div class="col elastic" id="two">Two</div>
</div>

四列-中间有弹性（无效）

<style type="text/css">
    #one, #three, #four {
        float:left;
        width:40px;
    }
    #two {
        width:100%;
    }
</style>

<div class="row">
    <div class="col" id="one">One</div>
    <div class="col elastic" id="two">Two</div>
    <div class="col" id="three">Three</div>
    <div class="col" id="four">Four</div>
</div>

请注意：对弹性项目右侧的元素应用float:right;也不起作用...

问题在于，如果弹性元素不在行的末尾，则菜单项不会保留在单行中。请检查下面的小提琴以了解我的意思...

jsfiddle

那么，如何将所需的弹性应用于兄弟姐妹之间的元素？我真的很想让标记尽可能简单。提前致谢！

更新：我已经接近解决方案，但是我尝试的每种方法都存在一个小问题。我将把它们分解，以及我遇到的每个问题。

方法1：显示：表格单元格； （由onetrickpony建议）

看起来就像答案一样，但是slide元素内部并不总是包含内容（文本或html），并且使用display: table-cell;属性设置格式的元素无法识别所应用的宽度，除非其中包含内容。因此，只有当我在幻灯片中有内容时，此方法才起作用...（我可以修改滑块的标记，但我想保持它的原样）。

方法2：CSS calc（）（也由onetrickpony建议）

我希望某些浏览器不支持它。CaniIUse.com Browser Support Chart for calc()。另一个极好的可能性！我不知道存在的一种，如果我为较旧的浏览器制作了一个后备JS脚本（可以避免），就可以利用它。

方法3：Flexbox（也由onetrickpony建议）

可能是我最喜欢的解决方案，但有限的支持使我胆怯。也可以与后备脚本一起使用。我前一段时间了解了这一点，这就是CSS和布局的未来。我们的救恩！迫不及待地想获得全力支持...

方法4：jQuery（由Tomasz Golinski建议）

我本来打算使用的是什么，但是我决定要查看是否有可以使用的CSS方法。使用jQuery设置元素的宽度时遇到了一些问题。主要是在调整容器大小时，脚本会在调整容器大小时计算适当的宽度。

因此，回答我问题的友善人士为我提供了解决此问题的可行方案。下面的任何一个无疑是可以接受的方法来完成我要问的事情。我只是在寻找一个更常见的CSS方法的答案。我希望可以通过一些我没有尝试过的样式来完成此操作。我承认我认为托马斯（Tomasz）是正确的-无法做到。万一有人对我有解决方案，我将这个问题悬而未决。 Tomasz和onetrickpony都给了我很好的答案。但是我仍在寻找纯CSS解决方案，该解决方案在旧的浏览器和新的浏览器中得到了广泛的支持，我不需要为其包含辅助脚本，并且该解决方案不需要元素内的字符即可工作。只想看看有人证明我们错了（好的老式CSS就有可能）。如果没有这个魔术的答案，我将把onetrickpony的答案标记为最佳解决方案，因为它是基于CSS的事实，并且他提供了多种简洁明了的解决方案。我最有可能使用他的flexbox CSS和Tomasz jQuery（作为辅助脚本）的组合。谢谢！

Answer 1

如果设置为使用浮点数，请通过从100％中减去其他列的宽度来计算“弹性”列的宽度。例：

<div class="row cols-4">
    <div class="col" id="one">One</div>
    <div class="col" id="two">Two</div>
    <div class="col elastic" id="three">Three</div>
    <div class="col" id="four">Four</div>
</div>

CSS：

.cols-4 .elastic{
   width: calc(100% - 45px * 3);
}

/* add more rules for other possible variations here */

http://jsfiddle.net/QM4LZ/



但是更干净，更轻松的方法是使用flexible boxes。这正是他们的设计目标。

.row{
    display: flex;
}

.col{
    flex: none;  /* <- don't flex */
    width: 45px;
}

.elastic{
    flex: auto; /* <- flex */
    width: 100%;
}

http://jsfiddle.net/F7sxU/



也可以使用表（fiddle）来实现此目的，但是在添加实际内容时，您很可能会遇到一些限制，并且需要更多包装元素。