javascript - 将多个元素链接在一起，使它们共享相同的内容

Question

是否可以让两个元素共享相同的内容:

----------
| Line 1 |
| Line 2 |
| Line 3 |
----------
    [SOME OTHETR STUFF HERE]
----------
| Line 4 |
| Line 5 |
| Line 6 |
----------

或者更复杂的例子，使用css3 columns

------------------- --------- --------------------------------
| Line 1 | Line 4 |   OTHER   |    Line 7    |    Line 10    |
| Line 2 | Line 5 |   STUFF   |    Line 8    |    Line 11    |
| Line 3 | Line 6 |   HERE    |    Line 9    |    Line 12    |
------------------- --------- --------------------------------

希望这是有道理的？

还可以设置不同的 div，具有不同的宽度、高度、列和样式。

感谢您的反馈。

---

尝试详细说明:

如果您知道像 inDesign 这样的程序，您可以在其中创建两个文本字段并将它们链接在一起，以便文本从第一个文本字段延续到下一个文本字段。同样，您可以将另一个链接到集合，如果文本足够长，它将从文本字段开始到第二个，最后结束:

这些盒子可以放置在屏幕各处，它们唯一的共同点就是它们共享相同的内容。

Box 1
------------------------------
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
Proin rutrum ligula nec quam 
molestie sed rutrum justo 
------------------------------

Box 2 
------------------------------ 
auctor. Quisque pulvinar diam 
nisl. Curabitur porttitor 
vehicula dui. Sed tempus 
venenatis est, non egestas 
------------------------------

Box 3
------------------------------ 
urna consequat a. Morbi diam 
mi, fermentum non lobortis 
eget, rhoncus id arcu. 

------------------------------ 

Answer 1

Here's a solution根据您的 original 处理高度不是行高的倍数和宽度不同的情况.

jQuery(function($) {
  var content = $(".c1").html(),
      $elems = $("div").empty(),
      lineHeight = 20,
      offset = 0,
      wholeThing = $("<div />"),
      maxWidth = 0;
  $elems.each(function() { maxWidth = Math.max(maxWidth, $(this).width()); });

  $elems.each(function() { 
    var thisWidth = $(this).width(),
        thisHeight = $(this).height(),
        floatHeight = (thisHeight / lineHeight | 0) * lineHeight;

    wholeThing.append($("<div />").css({
      width: maxWidth - thisWidth,
      height: floatHeight,
      clear: "right",
      float: "right"}));
    if (thisHeight % lineHeight) {
        wholeThing.append($("<div />").css({
          width: maxWidth,
          height: thisHeight - floatHeight,
          clear: "right",
          float: "right"}));
      });
    }

  wholeThing.css("width", maxWidth).append(content);

  $elems.each(function() {

    var $content = wholeThing.clone().appendTo(this);

    $content.css({
      position: "absolute",
      left: 0,
      top: -offset
    });

    offset += $(this).height();
  });
});

这与您采用的方法相同，但更进了一步。您使用全文创建了 div，将它们定位在目标 div 中，向上移动了“链”中所有先前容器的组合高度。

我添加的是这样的:

• 内容 div(称为 wholeThing，最终相乘并添加到每个容器的内容)的宽度设置为最高 所有容器的宽度。

• 在 wholeThing 的右侧，我们放置了 floated divs 以确保文本根据适用宽度。在示例中，第一个容器的宽度为 200 像素，最大宽度(因此 wholeThing 的宽度)为 300px。因此，我们在右边缘放置一个宽度为 100 像素且高度与第一个容器(向下舍入为行高的完整倍数)相同的 floated div。这解决了“不同宽度”的问题。

• 之后，假设 div 的高度不是行高的倍数，我们添加一个额外的全 Angular float 以确保我们没有半行在底部，解决行高问题。

由于this bug，“四舍五入为行高的倍数”仅适用于某些 webkit 浏览器。 .这似乎已在 Chrome 中修复，但我仍然在其他浏览器中看到它(特别是 Safari 5 和 Android 浏览器)。

如果这个问题不存在，您可以改为使宽度受限的 div 具有容器的整个高度(而不是向下舍入)，并使整个宽度的 div 的高度始终为 1(并在增加 offset 时考虑该额外像素)。这将具有非常棒的优势，即您不需要具有固定的行高。 Here's an example – 它适用于 Chrome、Firefox、Opera 和 IE9+，但不适用于上述 webkit 浏览器。它似乎也适用于 IE8，尽管我还没有完全弄清楚为什么，因为我的第一个版本(适用于 Safari 的版本)在 IE8 中出现问题。老实说，我在这里并没有在 IE8 上花太多时间。

因此顶级版本应该可以在 IE9+ 以及所有其他浏览器中工作，或多或少。

就列而言，我没有看到这种情况发生(除了基本上用 div 重建列)。