За последние 24 часа нас посетили 16614 программистов и 1649 роботов. Сейчас ищут 2016 программистов ...

Один текст в нескольких блоках

Тема в разделе "HTML и CSS", создана пользователем beckon, 25 июн 2010.

  1. beckon

    beckon Активный пользователь

    С нами с:
    28 ноя 2008
    Сообщения:
    6
    Симпатии:
    0
    Привет всем. Вопрос такой. Как сделать чтобы один текст шел на несколько блоков, блоки фиксированной величины, а желательно чтобы они ещё вытягивались равномерно в зависимости от текста. Пример на картинке.

    [​IMG]
     
  2. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
  3. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    Всмысле, как резать на колонки?

    делишь, берешь целую часть - это целые колонки. Остаток - это сколько будет нецелых =))
     
  4. beckon

    beckon Активный пользователь

    С нами с:
    28 ноя 2008
    Сообщения:
    6
    Симпатии:
    0
    o_O
    пример можете показать?
     
  5. Apple

    Apple Активный пользователь

    С нами с:
    13 янв 2007
    Сообщения:
    4.984
    Симпатии:
    2
    Автоматически никак.
    Можно добавить динамический рассчет с помощью JavaScript или предварительный рассчет на РНР, но с помощью HTML этого сделать, насколько я знаю, никак.
    Текст не будет перекладываться в другую ячейку таблицы ни при каких обстоятельствах, можно делать только на JS аверлей (и то, лишь визуально).
    Т.е менять структуру документа с переформировыванием.
     
  6. Apple

    Apple Активный пользователь

    С нами с:
    13 янв 2007
    Сообщения:
    4.984
    Симпатии:
    2
    Идея такая:

    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    4. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    5. <script type="text/javascript">
    6. $(document).ready(function() {
    7.     // Исходный текст
    8.     var Source  = new String($("#text").html());
    9.    
    10.     // Кол-во символов в одной колонке
    11.     var Length = Math.ceil(Source.length / 3);
    12.    
    13.     // Разбитый текст
    14.     var Columns = new Array(Source.substr(0, Length), Source.substr(Length, Length), Source.substr((Length*2), Length+1));
    15.    
    16.     $("#text").html('<table><tr><td>'+Columns[0]+'</td><td>'+Columns[1]+'</td><td>'+Columns[2]+'</td></tr></table>');
    17. });
    18. table { border-collapse: collapse; width: 90%; }
    19. td { border: 1px solid #000; padding: 10px; }
    20. <title>Разбиение на колонки</title>
    21. </head>
    22.  
    23.  
    24. <div id="text">
    25.  бла-бла-бла ... и это разнесет на три колонки бла-бла-бла ... и это разнесет на три колонки
    26.  бла-бла-бла ... и это разнесет на три колонки
    27.  бла-бла-бла ... и это разнесет на три колонки
    28.  бла-бла-бла ... и это разнесет на три колонки бла-бла-бла ... и это разнесет на три колонки
    29. </div>
    30. </body>
    31. </html>
    32.  
     
  7. beckon

    beckon Активный пользователь

    С нами с:
    28 ноя 2008
    Сообщения:
    6
    Симпатии:
    0
    2Apple
    БОЛЬШОЕ СПАСИБО
     
  8. Volt(220)

    Volt(220) Активный пользователь

    С нами с:
    11 июн 2009
    Сообщения:
    1.640
    Симпатии:
    1