18

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

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

------------------------------
4

6 回答 6

8

这是一个解决方案，它可以根据您的原始.

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

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

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

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

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

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

于 2013-03-09T18:21:55.750 回答
4

伙计，我猜你在谈论CSS Regions。这是一个非常酷的功能，但浏览器支持还不完善：

来自 caniuse.com 的 CSS 区域支持图表

于 2013-03-09T18:28:55.780 回答
3

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

这仅在以下情况下有效：

代码贴在下面，演示位于此处：

  <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();
  });
});
于 2013-03-07T18:50:35.417 回答
3

您的第一个布局可能仅使用 CSS 即可实现（没有 JavaScript，没有不受支持的属性）。但是，您可能无法准确设置框的大小，毕竟我们会伪造它，直到浏览器做出来。

让我们直接进入小提琴- 尝试调整它的大小等以了解它是如何工作的。

基本上我们依赖于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，都填充了虚拟内容以进行很好的衡量。瞧，注意文本是如何很好地换行的：

说真的，谁不喜欢小猫？

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

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

于 2013-03-13T07:45:20.400 回答
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 中可用，则需要大量的前期设置，但仍然很酷。

于 2013-03-07T15:41:59.593 回答
1

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

于 2013-03-15T21:57:00.587 回答