Come trasferire il testo da DIV a DIV?

Ho due DIV s con posizione assoluta su due lati di una pagina HTML quali (EXAMPLE)Come trasferire il testo da DIV a DIV?

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

con i 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; 
}

Esiste un modo per aggiungere del testo a sinistra DIV e far scorrere il testo in eccesso a quello giusto? Non sono bloccato a questi due DIV e sto solo cercando una soluzione per far scorrere il testo in eccesso in un'altra posizione.

NOTA: Spero di trovare una soluzione pura CSS, tuttavia, sembra improbabile; quindi, sto cercando una soluzione pure javascript (non usando le librerie JS).

fonte

2013-09-01 Googlebot

Con CSS puro è impossibile :) con JS è abbastanza difficile da ottenere con precisione il punto esatto in cui il testo overflow –

@ RokoC.Buljan, le nuove proprietà CSS3 non lo permettono ed è supportato dalla maggior parte dei browser: http://caniuse.com/#search=column – jeff

Non esiste una soluzione CSS a meno che non si desideri utilizzare le colonne CSS (affiancate). Usare vanilla JS è possibile, ma consentire jQuery sarebbe molto più semplice per attività specifiche del DOM come questo. – David

Ecco uno per l'approccio fixed-width. Lo spazio tra due colonne sarà uguale alla larghezza del div principale.

Fiddle

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

Per larghezza variabile è necessario JS o jQuery.

Aggiornamento:

Ho usato jQuery per questo scopo come ho trovato JS pure difficile trovare soluzione di questo.

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

Update 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

fonte

2013-09-01 11:32:03

Ancora questa è una soluzione alternativa con ** uno ** 'DIV', ma una bella –

@ RokoC.Buljan I sto lavorando per una larghezza dinamica;) –

L'OP ha detto esplicitamente ** senza librerie ** :) –

finora() Non è possibile usare i CSS, CSS3 (con 2 elementi separati)

ma utilizzando JS È possibile clonare il contenuto e utilizzare scrollTop sull'elemento destra:

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;

Come potete vedere sto aggiungendo anche un paragrafo vuoto, per risolvere il elemento destro necessario per scorrerePassa un po 'di px

_{Nota: aggiungi overflow:hidden; per gli elementi di identificazione #left e #right}

fonte

2013-09-01 11:46:31

Buono :) migliore del mio. –

@MuhammadTalhaAkbar Mi sono ispirato al commento di David ma ho trovato una soluzione più semplice;) –

Che dire se ci sono immagini all'interno delle div? http://jsfiddle.net/KcsrF/5/ – jeff

CSS Regions (ancora un 'progetto', ma) sta cercando di risolvere questo problema:

Il modulo regioni CSS permette contenuto di fluire attraverso più aree chiamate regioni .Le regioni non sono necessariamente contigue nell'ordine del documento . Il modulo regioni CSS fornisce un meccanismo di flusso del contenuto avanzato , che può essere combinato con schemi di posizionamento come definiti da altri moduli CSS come il modulo multi-colonna [CSS3COL] o il modulo layout griglia [CSS3-GRID-LAYOUT] posizionare le regioni dove scorre il contenuto.

Maggiori informazioni e tutorial a http://html.adobe.com/webplatform/layout/regions/

fonte

2013-09-01 11:52:39 haim770

"Stato attuale di Chrome: non si persegue più" :-( – Michael

Come trasferire il testo da DIV a DIV?

risposta

Problemi correlati