Question

我有一个HTML元素（假设是一个div ision），其中包含一组标题（h2）和段落（p），其中包含其他元素（例如，某些链接， a）。

我的目标是将我的HTML元素剪切为2个相同大小的元素。

不应删除

约束：段落，标题和块

我的想法是在子节点列表中浏览并复制每个段落的childNodes。

每次复制段落时，我都会计算出ordre中的大小，以便知道我是否达到了分区的一半大小。

以下是一些解释它的代码：

var elm = document.getElementById('article_colonnes'); // I want to cut this into 2 parts
var paragraphesNumber = paragraphes.length;
var halfSize = elm.innerHTML.length / 2 ;
var col1 = document.getElementById('col1');
var col2 = document.getElementById('col2');
var i=0;
do {
  var node = createNodeFromParagraphe(paragraphes[i]);
  if(node) {
    col1.appendChild(node);
    // update the size of the 1st column by updating inner HTML
    col1String = col1String + paragraphes[i].innerHTML;
  }
  i++;
  // compute the size of the 1st column
  col1Size = col1String.length;
}
while(col1Size < halfSize  || i < paragraphesNumber) ;

我在第二栏也这样做。

感谢您的帮助。

Answer 1

如果您尝试制作自动两列布局;看看multicolumnlists

Answer 2

要获得真正的两列布局，您需要段落的高度（而不是其中的字符）。这里的问题：获得高度的唯一方法是等待浏览器布局页面，除非指定每个元素的宽度。否则，用户会看到一个丑陋的闪烁。

所以我建议试试这个：

使用大多数浏览器支持的多列布局。如果浏览器不是IE＆lt; = 7，那么你就完成了。
对于IE 7及更低版本，请为所有元素设置固定宽度。等待浏览器布局页面（应该足以在body.onload中运行此代码或从页面末尾的脚本标记运行）。将所有元素放入id为“col1”的div中。
使用JavaScript在div“col1”的一半高度处查找元素。（see here）
如果此元素是标题，请跳过一个元素。
将下一个元素（以及所有其他元素）移动到div“col2”中。

那应该给你一个更长的col1和更短的col2。

如果移动不起作用，请在识别分割点后插入不可见的字符，获取col1.innerHtml，将其拆分为分割字符，并将结果的两个字符串用作col1和col2的innerHtml。

如果闪烁很多，请在脚本运行时尝试隐藏col1和col2（显示='无'）。

复制HTML子节点数组的一半

2 个答案: