Javascript 使用右浮动元素的响应性web设计

我知道很多响应性设计使用百分比宽度和绝对定位来适应不同媒体类型的屏幕宽度。但是，如果我们可以利用不常用但跨浏览器高度兼容的右浮动css样式呢

演示：

.wrapper{宽度：70%；边距：0自动；}
div，span{显示：块；浮点：左；位置：相对；}
.wrapper>div{width:60px；}
.b1{背景色：蓝色；高度：132px；}
.b2{背景色：红色；高度：88px；}
.b3{背景色：绿色；高度：44px；}
.test{背景色：黑色；最大宽度：160px；最小宽度：100px；浮动：右侧；边框：2px纯黑色；}
.test div{宽度：16px；高度：16px；背景色：黄色；边距：2px；}

我的想法是将右浮动元素缩小到最小宽度，而不使用百分比。当窗口宽度减小时，仅当相邻图元限制了图元的可用空间时，才会发生收缩过程。如果所述元件的可用空间不受限制，则元件将增加其宽度至最大长度。因此，实际上，该元素有一个最大宽度和一个最小宽度来控制给定的大小灵活性范围。（注意：在我上面链接的JSFIDLE演示中，通过将结果窗口缩小到一个小尺寸，可以很容易地演示这个宽度范围。）

此时如果右浮动元素合并到左浮动元素中，它将在左浮动元素下方向下浮动，保持其最大宽度

我想要的结果是，在浮动到相邻元素下之前，将右浮动元素收缩到其最小大小。一旦元素达到其最小尺寸，它将下降到其相邻的下方，并依次增加其宽度以填充剩余空间，直至达到其最大宽度，并开始重复适应其可用空间的过程，同时向右浮动

我的问题是，仅仅使用css/css3能实现我想要的结果吗？如果没有，是否有执行此功能的JavaScript/jQuery插件？ 我已经链接了上面的一个JSFIDLE演示，以帮助您理解并利用这个想法的解决方案

---

谢谢您的帮助。

您考虑过如何使用CSS媒体标签来针对不同的屏幕大小吗

这里有一个参考链接

jQuery方法将使用调整大小事件处理程序，并使用jQuery相应地调整CSS。这仅适用于调整浏览器窗口大小后。备选项在文档期间准备就绪后，可以动态计算宽度和高度

查看此堆栈解决方案

这里是另一个参考链接

---

格式正确的问题。使用JS/jQuery会起作用，但考虑到JS在移动设备上非常昂贵，而且并非所有设备都会执行javascript，几乎无法实现移动第一响应的目的。是的，我一直在使用媒体标签。我只是从不同的角度看待响应性设计，并尝试可能的解决方案和结果的新途径。这不是一个问题，我只是有一个想法，可以变成一个可能的jQuery插件或一些有用的东西。谢谢你的意见。

.wrapper { width: 70%; margin: 0 auto; }
div, span { display: block; float: left; position: relative; }
.wrapper > div { width: 60px; }
.b1 { background-color: blue; height: 132px; }
.b2 { background-color: red; height: 88px; }
.b3 { background-color: green; height: 44px; }
.test { background-color: black; max-width: 160px; min-width: 100px; float: right; border: 2px solid black; }
.test div { width: 16px; height: 16px; background-color: yellow; margin: 2px; }


<section class="wrapper">
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b3"></div>
    <span class="test">
        <div></div>
        <div></div>
        <div></div>
    </span>
</section>