7

（例）のようDIVに、ページの両側に絶対位置を持つ2つの があります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余分なテキストを右に流す方法はありますか? 私はこの 2 つDIVに固執していません。余分なテキストを別の位置に流すための解決策を探しているだけです。

注:純粋な解決策を見つけたいと思っていますCSSが、ありそうにないようです。次に、解決策を探していpure javascriptます(JSライブラリを使用していません)。

4

3 に答える 3

5

CSS Regions (まだ「ドラフト」ですが) は、この問題を修正することを目指しています:

CSS リージョン モジュールを使用すると、リージョンと呼ばれる複数の領域にまたがってコンテンツを流すことができます。領域は、ドキュメントの順序で必ずしも連続しているわけではありません。CSS リージョン モジュールは、高度なコンテンツ フロー メカニズムを提供します。このメカニズムは、マルチカラム モジュール [CSS3COL] やグリッド レイアウト モジュール [CSS3-GRID-LAYOUT] などの他の CSS モジュールで定義されている配置スキームと組み合わせて、リージョンを配置できます。コンテンツが流れる場所。

詳細情報とチュートリアルはhttps://www.adobe.com/devnet/archive/html5/articles/css3-regions.htmlにあります

于 2013-09-01T11:52:39.157 に答える
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;

ご覧のとおり、空の段落も追加しています。正しい要素を修正するには、スクロールトップにいくらかのピクセルが必要です

注:overflow:hidden; ID 要素に追加して#left、#right

于 2013-09-01T11:46:31.753 に答える