7

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

<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 库）。

4

3 回答 3

5

CSS Regions（仍然是一个“草案”，但是）旨在解决这个问题：

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

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

于 2013-09-01T11:52:39.157 回答
1

这是一种fixed-width方法。两列之间的间隙将等于主 div 的宽度。

小提琴

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

小提琴

于 2013-09-01T11:32:03.513 回答
1

到目前为止（2012 年）不可能使用 CSS、CSS3（带有 2 个单独的元素）

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

现场演示

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

于 2013-09-01T11:46:31.753 回答