газетная (журнальная) верстка

[sc@r@bey]

подскажите как можно реализовать отображения основного материала на странице в 2 колонки, как в журалах?

[XAOPT]

Как сделать это стилями я не знаю. Вероятнее всего никак. Я бв разбил текст с пожощью JS на несколько кусков определённой длины и распихал по блокам.

http://www.w3schools.com/jsref/jsref_slice_array.asp

[XAOPT]

Примерно так, В общем:

<style>
DIV {float: left; margin: 10px; padding: 10px; width: 150px; text-align: justify; border: solid 1px #000}
</style>

<div id='colonL'>sdf</div>
<div id='colonR'> sdf</div>

<script>
var myText = 'The patterns used in RegExp can be very simple, or very complicated, depending on what you~re trying to accomplish. To match a simple string like "Hello World!" is no harder then actually writing the string, but if you want to match an e-mail address or html tag, you might end up with a very complicated pattern that will use most of the syntax presented in the table below.';

var parts = Array( myText.slice(0, myText.length/2), myText.slice( myText.length/2,myText.length) );


document.getElementById('colonL').innerHTML = parts[0];
document.getElementById('colonR').innerHTML = parts[1];
</script>

Если требуется разбиение на значительное количество кусков. Скажем >3, то надо ввести цикл с инкрементированием точки начала слайса и проверкой длины строки.

Edited November 29, 2008 by XAOPT

[Ялекс]

Преобразовал в функцию (не проверял):

css:

.colum {
width:49%;
float:left;
}

html:

<div id="simpleText">The patterns used in RegExp can be very simple, or very complicated, depending on what you~re trying to accomplish. To match a simple string like "Hello World!" is no harder then actually writing the string, but if you want to match an e-mail address or html tag, you might end up with a very complicated pattern that will use most of the syntax presented in the table below.</div>

js:

function make2colums( id ){

elem = document.getElementById(id);

var parts = Array( elem.innerHTML.slice(0, elem.innerHTML.length/2), elem.innerHTML.slice( elem.innerHTML.length/2, elem.innerHTML.length) );

elem.innerHTML = '<div class="colum">' +parts[0]+ '</div><div class="colum">'+parts[1]+'</div>';

elem.style.overflow = 'hidden';

}

make2colums('simpleText');

Edited November 29, 2008 by Ялекс

[XAOPT]

В своём коде нашёл глюк в функциональности: слова разбиваются ничуть не по пробелу, а где попало. Поэтому преобразовал в:

<style>
DIV {float: left; margin: 10px; padding: 10px; width: 150px; text-align: justify; border: solid 1px #000}
</style>

<div id='colonL'>sdf</div>
<div id='colonR'> sdf</div>

<script>
var myText = 'The patterns used in RegExp can be very simple, or very complicated, depending on what you~re trying to accomplish. To match a simple string like "Hello World!" is no harder then actually writing the string, but if you want to match an e-mail address or html tag, you might end up with a very complicated pattern that will use most of the syntax presented in the table below.';

var reg = new RegExp("^(.){" + parseInt(myText.length/2) + "}(.*?)(\s+?)");
var result = reg.exec(myText);
var breaker = result[0].length - 1;

var parts = Array( myText.slice(0, breaker), myText.slice( breaker ,myText.length) );

document.getElementById('colonL').innerHTML = parts[0];
document.getElementById('colonR').innerHTML = parts[1];

</script>

2 Ялекс:

расширять dom-модель через свойство innerHTML допустимо, но считается крайне дурным тоном. Да и не всегда панацея. Например вот такая шутка не прокатит:

el.innerHTML= "<tabler><tr><td></td></tr>";
el.innerHTML += "<tr><td></td></tr></table>";

имхо лучше сразу привыкать пользоваться предусмотренными для этого функциями работы с деревом элементов.

Edited November 29, 2008 by XAOPT

[SelenIT]

Оно?

[rash]

Выглядит заманчиво (я о CSS3 multi-column), но пока применять очень рано, придется скриптами...

[sc@r@bey]

ого спасибо, пошел разбираться ))

[Ялекс]

@XAOPT, да, я знаю, что это не гигиенично... Просто небыло времени писать .appendChild...