Как передать текст из DIV в DIV?

У меня есть два DIV с с абсолютной позиции на двух сторонах HTML страницы, такие как (EXAMPLE)Как передать текст из DIV в 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, и я просто ищу решение для переноса лишнего текста в другую позицию.

ПРИМЕЧАНИЕ: Я надеюсь найти чистое решение CSS, хотя это кажется маловероятным; то я ищу решение pure javascript (не используя JS-библиотеки).

источник

2013-09-01 Googlebot

С чистым CSS это невозможно :) с JS это довольно трудно точно получить точную точку, где текст перетекает –

@ RokoC.Buljan, новые свойства CSS3 позволяют сделать это и поддерживается большинством браузеров: http://caniuse.com/#search=column – jeff

Нет CSS-решения, если вы не хотите использовать столбцы CSS (бок о бок). Использование vanilla JS возможно, но позволить jQuery будет намного проще для DOM-специфических задач, подобных этому. – David

Вот один для fixed-width подхода. Разрыв между двумя столбцами будет равен ширине основного div.

Fiddle

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

Для переменной ширины вам нужно JS или JQuery.

Update:

Я использовал 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

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

источник

2013-09-01 11:32:03

Все еще это обходное решение, использующее ** один ** 'DIV', но хороший –

@ RokoC.Buljan I я работаю для динамической ширины один;) –

OP явно говорит ** без библиотек ** :) –

до сих пор() Это не возможно с помощью 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;

Как вы можете видеть, я также добавление пустого абзаца, чтобы исправить правый элемент необходимо прокручиватьТолькое количество пикселей

_{Примечание: добавить overflow:hidden; к вашим ID элементам #left и #right}

источник

2013-09-01 11:46:31

Хорошо :) лучше, чем у меня. –

@MuhammadTalhaAkbar Я был вдохновлен комментарием Дэвида, но нашел более простое решение;) –

Как насчет того, есть ли изображения в divs? http://jsfiddle.net/KcsrF/5/ – jeff

CSS Regions (еще «проект», а) стремятся решить эту проблему:

Модуль CSS областей позволяет содержание течь через несколько областей называемых регионов ,Регионы не обязательно должны быть смежными в заказе на . Модуль областей CSS предоставляет усовершенствованный контентный механизм , который может быть объединен с схемами позиционирования как , определяемый другими модулями CSS, такими как модуль с несколькими столбцами [CSS3COL] или модуль макета сетки [CSS3-GRID-LAYOUT] для позиционируйте области , где происходит поток контента.

Более подробная информация и учебные пособия на http://html.adobe.com/webplatform/layout/regions/

источник

2013-09-01 11:52:39 haim770

«Текущий статус Chrome: больше не преследует» :-( – Michael

Как передать текст из DIV в DIV?

ответ

Смежные вопросы