css - 管理响应式布局中的文本列

Question

我在一个使用响应式布局的网站上工作，我遇到了 解决较新的 CSS 多列属性的缺点的问题 (http://dev.w3.org/csswg/css3-multicol/)。

当浏览器窗口足够宽时，我将文本分成两部分 带有用于较小图像的侧边栏的列。多列CSS 属性工作得很好，但它们不是太聪明。

第一部分被平均分成两个等高的列，但是 他们太高了。要让某人阅读本节，他们必须 沿第一列向下滚动，然后返回到该列的开头 接下来阅读其余部分。

第二部分也被分成两个等高的列，但是 只有两句话，看起来很别扭；真的没有 足够的内容来证明用户必须阅读第二列。

在我看来，解决方案是这样的:

1. 将部分分成具有固定最大高度的子部分。那 这样，您可以在不滚动页面的情况下跨栏阅读，而且看起来更 就像一篇文章。
2. 将低于最大高度的部分保留为单列。

问题在于 CSS3 多列不能以这种方式工作。我觉得 唯一的方法是某种涉及做的javascript解决方案 计算字符数、css 文本属性和元素 尺寸，然后拆分字符串/附加新的 html 元素以将内容分配到单独的部分，以使列正确中断。

请记住两件事:

1. 这些列是流动宽度的，因此选择魔数(Magic Number)是行不通的。
2. 该过程必须是可逆的，因此响应式布局可以在浏览器宽度较窄时切换回 1 列。

有点棘手，但我认为它可能足以尝试。有没有人听说过外面有人可能正在对付 这个问题已经？或者，如果没有，您对如何放置一个有任何想法吗？ 算法一起做这个？

非常感谢您的帮助。

---

2013 年 1 月 8 日:

为了澄清，这里有一些响应式设计预期模式的图片。 (只有两个链接，因为我是 SO 的新手)

模式一:移动端单列线性化

模式二。Single-column with sidebar for iPad / narrow browser windows

模式 3。Two-column for wide browser windows

模式 3 是问题所在。第一部分的内容太长，一个页面放不下，因此在本例中，我将其分成适合浏览器高度的行。这就是我正在寻找 JavaScript 解决方案的原因。

Answer 1

我想你要的是这个 -> http://codepen.io/justincavery/full/KsjHa

我在这里做的是使用 jquery 检查内容 div 中的字符数。

var $div = $( '#blah' );
if($div.text().length >= 600) {
$div.addClass('columns');
}

如果字符数等于或大于 600，则它会将“列”类添加到包含的 div。

需要明确的是，这意味着任何少于 600 个字符的文章都不会应用“专栏”类，任何超过或等于 600 个字符的文章都不会应用。

现在我们已经对 DOM 进行了排序，接下来是 CSS(请注意，此代码笔中的一些样式与此答案无关，因此请仅作为指南使用)。

下一阶段是为超过 600 个字符的内容添加列，但我们仍然需要确保在较小的宽度上我们只有一个列，否则它看起来很奇怪。

@media screen and (min-width:48em) {
 /*     48.000em /*(ackkkkkk, device specific bad)768px*/
  .columns { 
  -webkit-column-count: 2; /* Saf3, Chrome*/
  -webkit-column-gap: 4%; /* Saf3, Chrome*/
  -moz-column-count: 2; /* FF3.5+ */
  -moz-column-gap: 4%; /* FF3.5+ */
  column-count: 2; /* Opera 11+*/
  column-gap: 4%; /* Opera 11+*/
}
}

在这里，我选择了 48em 和更大(ipad 纵向和更高)作为定义列的点，允许任何较小的屏幕成为单个列。

我后来发现的一个问题是，如果文本太长，您希望它再次位于单列中。在这种情况下，您需要删除类以获得更高的值，或者检查字符数是否介于两个值之间。

您可能还注意到，我开始研究将背景设置为粉红色并将内容设置为两列的垂直媒体查询，但它无法实现您的期望。

---

问题所关注的这类技术的几点。

1. 直到我第三次阅读这个问题时，我才真正从图片中意识到它们是两个独立的部分。大多数人会假设左栏中的内容在移动到右栏(如报纸和杂志)之前会继续到页面底部。您需要在每个部分之间进行某种中断以显示这一点。
2. 这是一个设计问题，所以我认为它主要用于登陆/指导页面，您希望在这些页面上投入更多精力来设计内容样式。考虑到这一点，您应该通过手动添加类来对其进行定制。
3. 最后，Web 不是打印品，人们发现在单个页面上阅读东西，看看“The Great Discontent”有多好阅读

编辑

更新问题后，我认为您正在寻找的实现是在这项出色的工作上完成的 - http://kaikkonendesign.fi/typesetting-responsive-css3-columns/