Question

我在DIV页面的两侧有两个HTML个绝对位置，例如（EXAMPLE）

<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，我只是在寻找一种解决方案，将多余的文本转移到另一个位置。

注意：我希望找到一个纯粹的CSS解决方案，但这似乎是不可能的;那么，我正在寻找一个pure javascript解决方案（不使用JS库）。

Answer 1

CSS Regions（仍然是'草稿'，但是）的目的是解决这个问题：

CSS区域模块允许内容跨多个区域流动称为地区。这些地区不一定是连续的文件订单。 CSS区域模块提供高级内容流动机制，可以与定位方案相结合由其他CSS模块定义，例如多列模块[CSS3COL] 或网格布局模块[CSS3-GRID-LAYOUT]来定位区域内容流动的地方。

https://www.adobe.com/devnet/archive/html5/articles/css3-regions.html

的更多信息和教程

Answer 2

这是fixed-width方法的一个。两列之间的间隙将等于主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();

Fiddle

更新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();

Fiddle

Answer 3

到目前为止（ 2012 ）使用CSS，CSS3（带有2个独立元素）是不可能的

但使用 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;

正如你所看到的，我还附加了一个空段落，以修复正确的元素需要scrollTop一些px

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

如何将文本从DIV流向DIV？

3 个答案: