0

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

当浏览器窗口足够宽时，我将文本分成两列，并带有一个用于较小图像的侧边栏。多列 css 属性效果很好，但它们不太聪明。

第一部分被均匀地分成两个等高的列，但它们太高了。对于阅读本节的人，他们必须沿着第一列向下滚动，然后返回到下一列的开头才能阅读其余部分。

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

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

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

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

请记住两件事：

  1. 这些列是流体宽度的，所以选择幻数是行不通的。
  2. 该过程必须是可逆的，因此响应式布局可以在更窄的浏览器宽度下切换回 1 列。

有点棘手，但我认为这可能足以尝试。有没有人听说过有人可能已经在解决这个问题？或者，如果没有，您对如何为此组合算法有任何想法吗？

非常感谢你的帮助。

13 年 1 月 8 日：

为了澄清，这里有一些响应式设计的预期模式的图像。（因为我是新来的，所以只有两个链接）

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

模式 2. iPad 侧边栏单栏/窄浏览器窗口

模式 3.宽浏览器窗口的两列

模式 3 是问题所在。第一部分的内容太长而无法放在一个页面上，因此在这种情况下，我将其划分为适合浏览器高度的行。这就是我正在寻找的 JavaScript 解决方案。

4

2 回答 2

3

我想你要的是这个-> 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（请注意，此 codepen 有一些与此答案无关的样式，因此请仅用作指南）。

下一阶段是为超过 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. 最后，网络不是印刷品，人们只能在一个页面上阅读内容，看看“ The Great Discontent ”读起来有多好

编辑

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

于 2013-01-08T12:55:23.767 回答
-1

您可以单独使用 CSS 执行此操作：

.box {
    -o-text-overflow: ellipsis;   /* Opera */
    text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    width: 300px;                 /* fixed width */
}

希望这有帮助。

于 2014-09-04T10:44:46.093 回答