2010-06-30 3 views
0

Мне нужно создать страницу, подобную этойплавающий текст между двумя колоннами с белым пространством в середине

http://www.brightech.co.il/page.png

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

Теперь одно решение (которое не может быть в css ..) должно было бы плавать по изображению вправо, создать белый div и поплавать. но нет float: bottom in css ...

У меня есть идея о том, как реализовать это, но это очень тяжело на стороне браузера - это было бы поместить весь текст в div, который является левой колонке, проверьте ее высоту. то, если он слишком длинный, переместите последнее слово в правый столбец. снова проверьте, если высота левого столбца слишком длинная, и переместите другое слово, пока оно не достигнет правильной высоты.

Я хотел бы услышать любые другие идеи о том, как это сделать, поскольку это было бы моим последним средством.

Если у вас есть решение для webkit css, было бы здорово, так как клиентская сторона является мобильным сафари.

Спасибо!

ответ

0

Возможно, это было бы дьявольски весело развиваться с нуля.

Но, если вы используете jQuery, тогда есть как минимум 2 плагина, которые могут это сделать.

  1. jQuery Masonry plug-in.

  2. Columnizer jQuery Plugin.

+0

Большое спасибо, я использовал Columnizer и отлично работает. –

+0

Добро пожаловать. –

0

Вы можете просто приблизиться к высоте, задав лимит символов в зависимости от высоты изображения.

Каждая строка имеет длину около 45 символов и высоту 20 пикселей, поэтому: 45 * (h/20) будет близко к вашему пределу персонажа.

Первый блок переходит в левый столбец, а затем, когда достигнут предел персонажа, он отправляется справа. Вы можете сделать это на стороне сервера или применив классы css с javascript/jQuery.