在响应式布局中管理文本列 [英] Managing text columns in responsive layout

问题描述

我在一个使用响应式布局的网站，我遇到一个
问题，绕过新的CSS多列属性的缺点
（http：// dev。 w3.org/csswg/css3-multicol /）。

I'm working on a site that uses a responsive layout and I've run into a problem getting around the shortcomings of the newer CSS multi-column properties (http://dev.w3.org/csswg/css3-multicol/).

当浏览器窗口足够宽时，我将文本拆分为两个
列，较小的图像。多列css
属性工作得很好，但它们不是太聪明。

When the browser window is wide enough, I split the text into two columns with an sidebar for smaller images. The multi-column css properties work great, but they're not too smart.

第一部分被均匀分成两个等高的列，但是
他们太高了。对于有人阅读这部分，他们必须
向下滚动第一列，然后备份到
旁边阅读其余的开始。

The first section is split evenly into two equal-height columns, but they're way too tall. For someone to read this section they'd have to scroll down along the first column, then back up to the start of the next to read the rest.

第二部分也分成两个等高的列，但
只有两个句子，所以看起来很尴尬;没有真正的
足够的内容来证明用户必须阅读的第二列。

The second section is split into two equal-height columns too, but there's only two sentences, so it looks awkward; there's not really enough content to justify a second column the user has to read across.

在我心中的解决方案是：

The solution, in my mind, is this:

1. 将部分分割成具有固定最大高度的子部分。
   




2. 保留比最大高度短的节单列。

1. Break sections into sub-sections with a fixed maximum height. That way, you can read across columns without scrolling the page, and it looks more like an article.
2. Keep sections that are shorter than that maximum height as a single column.

问题是CSS3多列不能以这种方式工作。我认为
只有方式将是某种类型的JavaScript解决方案涉及对字符计数，css文本属性和元素
维度进行
计算，然后拆分字符串/追加新的html元素以将内容分发到单独的部分，以使列正确断开。

The issue is that CSS3 multi-columns don't work this way. I think the only way would be some kind of javascript solution that involves doing calculations on character-counts, css text properties, and element dimensions, and then splitting strings/appending new html elements to distribute the content into separate sections to make the columns break correctly.

请记住两件事：

1. 这些列是流体宽度，


2. 该过程必须是可逆的，因此响应式布局可以在较窄的浏览器宽度下切换回1列。

这种棘手的问题，但我认为这可能是足够的。有人听说过有人可能正在处理
这个问题已经吗？

Kind of tricky, but I think it's probably doable enough to try. Has anyone heard of someone out there that might be tackling this problem already? Or if not, do you have any ideas on how to put an algorithm together for this?

非常感谢您的帮助。

1/8/13：

的响应设计的预期模式。 （因为我是SO新手，只有两个链接）

To clarify, here are a few images of the intended modes of the responsive design. (Just two links since I'm new at SO)

模式1：移动单列线性化

Mode 1: Single-column linearized for mobile

模式2. iPad /单一浏览器窗口边栏的单栏

模式3. 两列用于宽浏览器窗口 a>

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

Mode 3 is where the issue is. The first section's content is too long to fit on one page, so in this case I'm dividing it into rows that fit in the browser's height. That's what I'm looking for a JavaScript solution for.

推荐答案

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

I think what you're after is this -> http://codepen.io/justincavery/full/KsjHa

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

What I'm doing here is using jquery to check the count of the number of characters inside the content div.

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

如果字符数等于或大于600，

If the number of characters are equal to or greater than 600 then it adds the class of 'columns' to the containing div.

为了清楚起见，这意味着任何小于600个字符的文章都不会应用column类，

Just to be clear, this means that any article less than 600 characters will not have the "column" class applied and anything that has more or equal to 600 characters will not.

现在我们已经将DOM排序到CSS了（请注意，这个代码有一些样式

Now that we've got the DOM sorted, on to the CSS (please note that this codepen has some styles that do not relate to this answer, so please use only as a guide).

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

The next stage is to add the columns for the content that is longer than the 600 characters, but we still need to ensure that on smaller widths we only have a single column otherwise it would just look peculiar.

@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+*/
}
}

选择48ems及以上（ipad portrait和up）作为列定义的点，允许任何较小的屏幕为单个列。

Here I've chosen 48ems and greater (ipad portrait and up) as the point at which the columns are defined, allowing for any smaller screens to be a single column.

其中一个问题我后来提到的是，如果文本太长，你希望它在一个单一的列。在这种情况下，您需要删除较高值的类，或者检查字符计数是否在两个值之间。

One of the issues I picked up later on was that if the text was too long you wanted it to be in a single column again. In this case you will need to either remove the class for a higher value, or put a check to see if the character count is in between the two values.

您可以也注意到我开始寻找一个垂直媒体查询，将背景设置为粉红色，内容为两列，但它不会实现你想要的。

You may also notice that I started looking into a vertical media query which sets the background to pink and the content to two columns but it was not going to achieve what you were looking for.

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

A few points for this type of technique the question is looking at.

1. 我没有从图片中意识到，他们是两个独立的部分，直到我第三次读到这个问题。大多数人会认为左栏中的内容继续到页面底部，然后移动到右栏（ala报纸和杂志）。


2. 这是一个设计的东西，所以我假设它将主要用于着陆/教学页面，你想要把更多的工作放在样式的内容。考虑到这一点，你应该通过手动添加类来定制它。


3. 最后，网络不打印，人们发现在一个页面上阅读的东西，看看多好 The Great Discontent 是阅读

1. I didn't actually realise from the picture that they were two separate sections until I read the question the third time. Most people would assume that the content in the left column continued to the bottom of the page before moving to the right column (ala newspapers and magazines). You would need some kind of break between each section to show this.
2. This is a design thing, so I would assume it would mainly be used for landing/instructional pages where you would want to put more work into styling the content. With that in mind you should just tailor it by adding the classes manually.
3. Finally, the web is not print and people are find with reading things on a single page, check out how nice "The Great Discontent" is to read

EDIT

更新问题后，我认为您正在寻找的实现是在这个很好的工作 - http://kaikkonendesign.fi/typesetting-responsive-css3-columns/

这篇关于在响应式布局中管理文本列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！