如何将文本从一个 DIV 流动到另一个 DIV？

Question

我有两个绝对定位在 HTML 页面两侧的 DIV，例如 (例子)

<div class="left">
</div>
<div class="right">
</div>

使用CSS

.left{
    position:absolute;
    left:10px;
    top:10px;
    width:100px;
    height:100px;
    background:red;
}
.right{
    position:absolute;
    right:10px;
    top:10px;
    width:100px;
    height:100px;
    background:blue;
}

有没有一种方法可以在左侧的DIV中添加文本，并将多余的文本流到右侧的DIV中？ 我不局限于这两个DIV，只是在寻找将多余文本流入另一个位置的解决方案。

注意：我希望找到一个纯CSS的解决方案，虽然这似乎很难实现；因此，我正在寻找一个纯Javascript解决方案（不使用JS库）。

- Googlebot

---

仅使用纯CSS是不可能的 :) 使用JS可以相当困难地准确获取文本溢出的确切点。 - Roko C. Buljan

@RokoC.Buljan，新的CSS3属性确实允许它，并且被大多数浏览器支持：http://caniuse.com/#search=column - user2417483

除非您想使用CSS列（并排），否则没有CSS解决方案。使用原生JS是可能的，但允许jQuery将更容易处理像这样的DOM特定任务。 - David Hellsing

@David 如果内容中有图片怎么办？ - user2417483

CSS区域是解决此问题的方法，不幸的是，浏览器支持还不太完善 - http://caniuse.com/#feat=css-regions - Michael Low

Answer 1

CSS Regions（目前仍为“草案”，但）旨在解决此问题：

CSS区域模块允许内容流动到称为区域的多个区域中。这些区域在文档顺序上不一定是连续的。CSS区域模块提供了一个高级内容流动机制，可以与其他CSS模块（例如Multi-Column Module [CSS3COL]或Grid Layout Module [CSS3-GRID-LAYOUT]定义的定位方案相结合，以定位内容流动的区域。

更多信息和教程请参见https://www.adobe.com/devnet/archive/html5/articles/css3-regions.html

- haim770

---

当前Chrome状态：不再追求。 :-( - Michael

Answer 2

这里有一个关于固定宽度方法的例子。两列之间的间隔将等于主div的宽度。

Fiddle

<div class="container">
    <div class="sides">The big text here.<div>
    <div class="main"></div>
</div>

对于可变宽度，您需要使用JS或jQuery。

更新：

我已经使用了jQuery来解决这个问题，因为我发现纯JS很难找到解决方案。

function setGap() {
    var width = $(".main").width();
    $(".sides").css({
        "-moz-column-gap": width + "px",
            "-webkit-column-gap": width + "px",
            "column-gap": width + "px"
    });
}
$(window).resize(setGap);
setGap();

代码编辑器

更新1：

function setGap() {
    var width = document.getElementsByClassName("main")[0].offsetWidth;
    var elem = document.getElementsByClassName("sides")[0];
    var style = elem.getAttribute("style");
    if (typeof style != "null") {
        style =
            "-moz-column-gap:" + width + "px; -webkit-column-gap:" + width + "px; column-gap:" + width + "px";
        elem.setAttribute("style", style);
    }
    else {
        style +=
            "-moz-column-gap:" + width + "px; -webkit-column-gap:" + width + "px; column-gap:" + width + "px";
        elem.setAttribute("style", style);
    }
}
window.onresize = setGap;
setGap();

代码片段

- Muhammad Talha Akbar

---

仍然是使用 一个 DIV 的解决方法，但是很好。 - Roko C. Buljan

OP明确表示不使用库 :) - Roko C. Buljan

@RokoC.Buljan 嗯，我只是在向他提出我的意见。是的，我正在尝试用纯JS来复制它。 - Muhammad Talha Akbar

@RokoC.Buljan 找到了纯JS的解决方案 :P - Muhammad Talha Akbar

不错，但是它仍然没有使用两个单独的DIV :) - Roko C. Buljan

让我们在聊天中继续这个讨论。 - Muhammad Talha Akbar

Answer 3

到目前为止（2012年），使用CSS、CSS3（需要两个独立元素）是不可能的。

但是，使用JS，您可以克隆内容并在正确的元素上使用scrollTop：

LIVE DEMO

var d = document,
    $left  = d.getElementById('left'),
    $right = d.getElementById('right'),
    leftH  = $left.offsetHeight;

$right.innerHTML = $left.innerHTML +'<p style="height:'+ leftH +'px;" />';
$right.scrollTop = leftH;

正如您所看到的，我还附加了一个空段落，以修复右侧元素需要滚动一定数量的像素

_{注意: 在您的ID元素#left和#right中添加overflow:hidden;}

- Roko C. Buljan

---

不错 :) 比我的好。 - Muhammad Talha Akbar

@MuhammadTalhaAkbar 我受到David的评论的启发，但找到了一个更简单的解决方案 ;) - Roko C. Buljan

@jeff 那么 OP 就不应该以那种方式构建网站了 :) - Roko C. Buljan

这会导致文本被沿着中间切成两半，也就是说一个字符的上半部分在一个div里，下半部分在另一个div里。每个字符都被切成了两半。这绝不是一个好的解决方案。 - iconoclast

@iconoclast 至少正确的字符被截断了。你需要想出更好的解决方案，或者简单地设置正确的字体大小和行高。这只是为了给你一个想法。 - Roko C. Buljan