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

Question

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

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

手风琴-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建议）

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

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

我不希望某些浏览器支持 ... CaniIUse.com 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/

---

但是更干净，更简便的方法是使用柔性盒子 。 这正是他们的设计目标。

.row{
    display: flex;
}

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

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

http://jsfiddle.net/F7sxU/

---

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

Answer 2

先前的答案确实可以解决问题，但是@onetrickpony的解决方案存在一些问题

示例＃1在动态项目数下无法正常工作。

示例＃2在大多数浏览器中都可以使用，但并非所有浏览器都支持灵活框。

这是简单的javascript代码

jsFiddle： http : //jsfiddle.net/aQEt3/5/

var count = $('.row').children().length; // counts how many items are in the entire row
var totWidth = $('.row').width(); // checks total width of the row
var elWidth = totWidth - ((count - 1) * 45); // counts how wide should be the elastic it

$(document).ready(function () {
    $('.elastic').css('width', elWidth); // when document is ready, apply the new width to the elastic
});

请注意，这是非常简单的代码，并且在以下情况下会出现一些问题：

*有2个或更多.row项目

*您有多个弹性班级