1

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

演示：http: //jsfiddle.net/3A89Q/48/

.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>

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

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

我想要的结果是让这个正确的浮动元素缩小到它的最小尺寸，然后再向下浮动到它的邻居下面。一旦元素达到它的最小尺寸，它就会下降到它的邻居下面，然后增加它的宽度以填充剩余空间直到它的最大宽度，并开始重复适应其可用空间的过程，同时向右浮动。

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

谢谢您的帮助。

4

1 回答 1

0

您是否考虑过使用 CSS 媒体标签来定位不同的屏幕尺寸？

这是一个参考链接。

http://webdesignerwall.com/tutorials/css3-media-queries

jQuery 方法将使用调整大小事件处理程序，并使用 jQuery 相应地调整 CSS。这仅适用于调整浏览器窗口大小的情况。准备好文档期间的替代方案，您可以动态计算宽度和高度。

查看此堆栈解决方案Using jQuery To Get Size of Viewport

这是另一个参考链接

http://api.jquery.com/resize/

于 2013-08-20T08:30:03.677 回答