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

时间：2013-03-07 10:12:19

标签： javascript jquery html css css3

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

----------
| 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也可以设置不同的宽度，高度，列和＆amp;风格。

感谢您的反馈。

试着详细说明：

如果您有任何人知道像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. 

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

6 个答案:

答案 0 :(得分：8)

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的右侧，我们设置了float ed divs，以确保根据适用的宽度包装文本。在该示例中，第一个容器的宽度为200像素，最大宽度（因此wholeThing的宽度）为300px。因此，我们在右边缘放置一个宽度为100像素且与第一个容器高度相同的float ed div（向下舍入到行高的完整倍数）。这解决了“不同宽度”的问题。

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

由于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重建列）。

答案 1 :(得分：4)

盖伊，我猜你在谈论CSS Regions。这是一个非常酷的功能，但browser support还不完美：

CSS Regions support chart from caniuse.com

答案 2 :(得分：3)

我现在能想到的最好的是：http://jsbin.com/iretip/3/edit

这只适用于：

代码发布在下方，the demo is located here：

  <div class="c1 c">
    Line 1<br />Line 2<br />Line 3<br />Line 4<br />Line 5<br />Line 6<br />Line 7<br />Line 8<br />Line 9<br />Line 10<br />Line 11<br />Line 12<br />Line 13<br />Line 14<br />Line 15<br />Line 16<br />Line 17<br />Line 18<br />Line 19<br />Line 20<br />Line 21<br />
  </div>
  <div class="c2 c"></div>
  <div class="c3 c"></div>

CSS：

.c {
  position: relative;
  line-height: 20px;
  overflow: hidden;
  width: 160px;
}

.c1 {
  height: 200px;
  background: yellow;
}
.c2 {
  position: absolute;
  top: 300px;
  height: 140px;
  background: blue;
}
.c3 {
  position: absolute;
  top: 300px;
  left: 200px;
  height: 200px;
  background: red;
}

和JavaScript：

jQuery(function($) {
  var content = $(".c1").html(),
      $elems = $("div").empty(),
      lineHeight = 20,
      offset = 0;

  $elems.each(function() {
    var $wrapper = $("<div/>").appendTo(this),
        $content = $("<div/>").html(content).appendTo($wrapper);

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

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

答案 3 :(得分：3)

您的第一个布局可以仅使用CSS实现（没有JavaScript，没有不受支持的属性）。你可能无法准确地设置盒子的大小，毕竟我们会假装它直到浏览器制作它。

Let's jump right into the fiddle - 尝试调整等等，以了解其工作原理。

基本上我们依赖于float行为，这个到处支持的经常被滥用的属性最初是为流动图像的段落文本构建的。现在，因为我们可以使任何东西浮动，我们只是将你的其他东西放在这里内容！ CSS的其余部分是纯粹的欺骗 - 使浮动内容看起来不像容器的一部分。在实践中，您可能更喜欢“虚假内容块”方法，与流行的虚拟列不同。

一个问题是缺乏对内容中断位置的控制 - 必须将分隔符直接插入到文本中。如果容器宽度是固定的，您可以在服务器端以足够的准确度插入分隔符（在要打破的文本的半行内）。

最后，这是代码：

.container {
    padding:10px;
    border:1px solid black;
    background: #ccc;
    text-align:justify;
}
.other-stuff {
    float:left;
    height:130px;
    width:100%;
    border-top:1px solid black;
    border-bottom:1px solid black;
    /*left and right margins are so negative to "cover up" .container border*/
    margin:10px -11px;
    /*and now padding to offset left and right negative margins*/
    padding:0 11px;
    /*pretend this is see-through*/
    background:#fff;
}

标记非常简单 - .other-stuff内部.container，两者都填充了虚拟内容以便进行测量。瞧，请注意文本如何很好地包装：

Seriously, who doesn't like kittens?

没有运气试图用css3列伪造它，除了column-gap可能对假背景有用（即将容器分成两列，间隙与分隔符内容一样宽）。

注意： 请避免使用JS进行此类内容布局调整，因为这样会导致事先没有样式化的内容。但是，如果使用AJAX异步检索内容，则使用JS是合适的 - 这样可以在附加到页面之前对其进行处理。

答案 4 :(得分：2)

这是一些简单的JS。 http://jsfiddle.net/wesleyhales/vsD3m/

HTML：

<div id="input">Line 1
Line 2
Line 3
Line 4</div>

<div id="box1">  
</div>
<hr/>
My content... more content.. and more content
<hr/>
<div id="box2">  
</div>

JS：

var myinput = document.getElementById('input').innerHTML;
var threshhold = 2;
var totalLines = myinput.split('\n');
for(var i = 0; i < totalLines.length; i++){
    if(i < threshhold){
       document.getElementById('box1').innerHTML += totalLines[i] + '\n'; 
    }else{
       document.getElementById('box2').innerHTML += totalLines[i] + '\n';  
    }    
}

总的来说，你必须有一个源输入，包含所有行。然后你需要一个每个盒子的门槛 - 你想要多少行？ （或框高的基本阈值或行中的字符等）。然后，您需要在满足每个阈值时分配目标。

如果这在CSS中可用，则需要大量的前期设置，但仍然很酷。

答案 5 :(得分：1)

这与读缓冲区问题大致相同（即读取一堆文本，通过缓冲区加载缓冲区加载，然后将其解析为其他单元（在纯文本的情况下为行））。数据和显示代码之间的缓冲层会有所帮助。 （对不起，我没有任何代码示例。）

相关问题
最新问题