将多个元素链接在一起,以便它们共享相同的内容

Question

有两个元素共享相同内容是否可行:

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

或者更复杂的例子,使用css3列

------------------- --------- --------------------------------
| 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

这是一个解决方案,根据您的原始高度处理高度不是行高的倍数,宽度是不同的.

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使用全文创建了s,将它们定位在目标div中,向上移动了"链"中所有先前容器的组合高度.

我添加的是这个:

• 内容div(称为wholeThing最终成倍增加并添加到每个容器的内容)的宽度设置为所有容器的最大宽度.

• 在右侧wholeThing,我们将floated设置divs为确保文本根据适用的宽度进行包装.在该示例中,第一个容器的宽度为200像素,最大宽度(因此宽度wholeThing)为300px.因此,我们将一个floatED div100个像素的宽度,并且具有相同的高度所述第一容器(向下舍入到行高度充分倍数)上的右边缘.这解决了"不同宽度"的问题.

• 之后,假设div高度不是线高的倍数,我们添加一个额外的全宽浮点数,以确保我们底部没有半线,解决了线高问题.

由于这个bug,"向下舍入到行高的倍数"只适用于某些webkit浏览器.这似乎已在Chrome中修复,但我仍然在其他浏览器中看到它(特别是Safari 5和Android浏览器).

如果此问题不存在,您可以改为使宽度约束div具有容器的整个高度(而不是向下舍入),并使全宽div始终具有高度1(并且在递增时考虑该额外像素offset) .这将具有令人敬畏的优势,即您不需要具有固定的线高.这是一个例子 - 它适用于Chrome,Firefox,Opera和IE9 +,但不适用于上述webkit浏览器.它似乎也适用于IE8,虽然我还没弄清楚为什么,因为我的第一个版本(在Safari中运行的版本)在IE8中打破了.说实话,我没有在这里花太多时间在IE8上.

因此,顶级版本应该可以在IE9 +以及所有其他浏览器中运行,或多或少.

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