CSS 区域：等待浏览器支持时的 JS 替代方案答案

【问题标题】：CSS regions: JS alternative while we wait for browser supportCSS 区域：等待浏览器支持时的 JS 替代方案
【发布时间】：2012-04-01 21:17:12
【问题描述】：

有谁知道复制new "regions" css proposition put forward by Adobe?的开源JS解决方案

我真的希望能够将内联内容从一个区域流向另一个区域，以开发类似杂志的响应式布局。我发现'columnizing'插件可以在没有CSS的情况下创建列，但无法找到任何将文本从一个盒子传递到另一个盒子的东西。

【问题讨论】：

我认为性能成本可能对于生活应用来说是不可接受的。由于任何布局更改都需要您重新渲染页面。此外，规范可能会在今年发生变化，因此对于优秀的开发人员来说，它并不是特别有吸引力的项目，因此我认为我们至少在 2013 年之前不会看到好的 JS 替代方案。
是的，对于响应式或流式布局，页面布局和内容流动似乎是不可分割的任务——我不完全理解后者是如何工作的。我正在考虑类似 [treesaver] (treesaver.net) 之类的东西……如果重新布局的规则更加透明，因此更容易控制。叹息。

标签： responsive-design flow regions

【解决方案1】：

首先考虑一下 2014 年及以后哪些设备的使用率最高。
1. 手机 - 主要是人像模式
2. 平板电脑 - 纵向或横向模式
3. 笔记本电脑、PC、电视 - 横向模式

响应式设计和媒体查询已经满足了大多数场景。在较大的模式下浮动文本块，但在手机纵向模式下将文本适应有限的屏幕空间。
手机中的 2 x 列（已经占主导地位）纵向模式看起来很糟糕。

现在 css 区域只是一个规范
它打破了将内容与表示分离的主要规则，希望通过相互链接的 div 来流动文本。我的建议是坚持响应式设计，它已经在所有地方都得到了支持。
Adobe 需要进行大量更改才能期望 W3C 能够支持它。
在目前的形式下，它完全破坏了网页设计，并且会不可逆转地破坏 html5 和 css 规范。

但是 CSS 排除项（塑造区域）确实有一些优点（如果它适用于媒体）查询），也许 Adobe 和合作伙伴会在未来某个时候为该功能找到可行的解决方案。

【讨论】：

【解决方案2】：

这可能就是你要找的东西：http://www.csstextwrap.com/

【讨论】：